Skip to content

Commit b6f6905

Browse files
cobeo2004cobeo2004
committed
feat: finished introduction page for Vietnamese
1 parent 47abf94 commit b6f6905

26 files changed

+2815
-0
lines changed

‎www/src/config.ts

+42
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const KNOWN_LANGUAGES = {
3737
no: "Norsk",
3838
pl: "Polski",
3939
uk: "Українська",
40+
vi: "Tiếng Việt",
4041
"zh-hans": "简体中文",
4142
} as const;
4243
export type KnownLanguageCode = keyof typeof KNOWN_LANGUAGES;
@@ -413,6 +414,42 @@ export const SIDEBAR: Sidebar = {
413414
{ text: "Docker", link: "zh-hans/deployment/docker" },
414415
],
415416
},
417+
vi: {
418+
"Create T3 App": [
419+
{ text: "Giới thiệu", link: "vi/introduction" },
420+
{ text: "Tại sao chọn CT3A?", link: "vi/why" },
421+
{ text: "Cài đặt", link: "vi/installation" },
422+
{
423+
text: "Cấu trúc thư mục (Pages Router)",
424+
link: "vi/folder-structure-pages",
425+
},
426+
{
427+
text: "Cấu trúc thư mục (App Router)",
428+
link: "vi/folder-structure-app",
429+
},
430+
{ text: "Câu hỏi thường gặp", link: "vi/faq" },
431+
{ text: "T3 Collection", link: "vi/t3-collection" },
432+
{ text: "Các khuyến nghị khác", link: "vi/other-recs" },
433+
],
434+
Usage: [
435+
{ text: "Bước đầu tiên", link: "vi/usage/first-steps" },
436+
{ text: "Next.js", link: "vi/usage/next-js" },
437+
{ text: "TypeScript", link: "vi/usage/typescript" },
438+
{ text: "tRPC", link: "vi/usage/trpc" },
439+
{ text: "Prisma", link: "vi/usage/prisma" },
440+
{ text: "NextAuth.js", link: "vi/usage/next-auth" },
441+
{
442+
text: "Biến môi trường",
443+
link: "vi/usage/env-variables",
444+
},
445+
{ text: "Tailwind CSS", link: "vi/usage/tailwind" },
446+
],
447+
Deployment: [
448+
{ text: "Vercel", link: "vi/deployment/vercel" },
449+
{ text: "Netlify", link: "vi/deployment/netlify" },
450+
{ text: "Docker", link: "vi/deployment/docker" },
451+
],
452+
},
416453
};
417454

418455
export const SIDEBAR_HEADER_MAP: Record<
@@ -475,4 +512,9 @@ export const SIDEBAR_HEADER_MAP: Record<
475512
Usage: "用法",
476513
Deployment: "部署",
477514
},
515+
vi: {
516+
"Create T3 App": "Create T3 App",
517+
Usage: "Sử dụng",
518+
Deployment: "Triển khai",
519+
},
478520
};

‎www/src/pages/vi/deployment/docker.md

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
title: Docker
3+
description: Deployment with Docker
4+
layout: ../../../layouts/docs.astro
5+
lang: en
6+
---
7+
8+
You can containerize this stack and deploy it as a single container using Docker, or as a part of a group of containers using docker-compose. See [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) for an example repo based on this doc.
9+
10+
## Docker Project Configuration
11+
12+
Please note that Next.js requires a different process for build time (available in the frontend, prefixed by `NEXT_PUBLIC`) and runtime environment, server-side only, variables. In this demo we are using two variables, pay attention to their positions in the `Dockerfile`, command-line arguments, and `docker-compose.yml`:
13+
14+
- `DATABASE_URL` (used by the server)
15+
- `NEXT_PUBLIC_CLIENTVAR` (used by the client)
16+
17+
### 1. Next Configuration
18+
19+
In your [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js), add the `standalone` output-option configuration to [reduce image size by automatically leveraging output traces](https://nextjs.org/docs/advanced-features/output-file-tracing):
20+
21+
```diff
22+
export default defineNextConfig({
23+
reactStrictMode: true,
24+
swcMinify: true,
25+
+ output: "standalone",
26+
});
27+
```
28+
29+
### 2. Create dockerignore file
30+
31+
<details>
32+
<summary>
33+
Click here and include contents in <code>.dockerignore</code>:
34+
</summary>
35+
<div class="content">
36+
37+
```
38+
.env
39+
Dockerfile
40+
.dockerignore
41+
node_modules
42+
npm-debug.log
43+
README.md
44+
.next
45+
.git
46+
```
47+
48+
</div>
49+
50+
</details>
51+
52+
### 3. Create Dockerfile
53+
54+
> Since we're not pulling the server environment variables into our container, the [environment schema validation](/en/usage/env-variables) will fail. To prevent this, we have to add a `SKIP_ENV_VALIDATION=1` flag to the build command so that the env-schemas aren't validated at build time.
55+
56+
<details>
57+
<summary>
58+
Click here and include contents in <code>Dockerfile</code>:
59+
</summary>
60+
<div class="content">
61+
62+
```docker
63+
##### DEPENDENCIES
64+
65+
FROM --platform=linux/amd64 node:20-alpine AS deps
66+
RUN apk add --no-cache libc6-compat openssl
67+
WORKDIR /app
68+
69+
# Install Prisma Client - remove if not using Prisma
70+
71+
COPY prisma ./
72+
73+
# Install dependencies based on the preferred package manager
74+
75+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
76+
77+
RUN \
78+
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
79+
elif [ -f package-lock.json ]; then npm ci; \
80+
elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm i; \
81+
else echo "Lockfile not found." && exit 1; \
82+
fi
83+
84+
##### BUILDER
85+
86+
FROM --platform=linux/amd64 node:20-alpine AS builder
87+
ARG DATABASE_URL
88+
ARG NEXT_PUBLIC_CLIENTVAR
89+
WORKDIR /app
90+
COPY --from=deps /app/node_modules ./node_modules
91+
COPY . .
92+
93+
# ENV NEXT_TELEMETRY_DISABLED 1
94+
95+
RUN \
96+
if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
97+
elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
98+
elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
99+
else echo "Lockfile not found." && exit 1; \
100+
fi
101+
102+
##### RUNNER
103+
104+
FROM --platform=linux/amd64 gcr.io/distroless/nodejs20-debian12 AS runner
105+
WORKDIR /app
106+
107+
ENV NODE_ENV production
108+
109+
# ENV NEXT_TELEMETRY_DISABLED 1
110+
111+
COPY --from=builder /app/next.config.js ./
112+
COPY --from=builder /app/public ./public
113+
COPY --from=builder /app/package.json ./package.json
114+
115+
COPY --from=builder /app/.next/standalone ./
116+
COPY --from=builder /app/.next/static ./.next/static
117+
118+
EXPOSE 3000
119+
ENV PORT 3000
120+
121+
CMD ["server.js"]
122+
```
123+
124+
> **_Notes_**
125+
>
126+
> - _Emulation of `--platform=linux/amd64` may not be necessary after moving to Node 18._
127+
> - _See [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) to understand why `libc6-compat` might be needed._
128+
> - _Using Alpine 3.17 based images [can cause issues with Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Setting `engineType = "binary"` solves the issue in Alpine 3.17, [but has an associated performance cost](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._
129+
> - _Next.js collects [anonymous telemetry data about general usage](https://nextjs.org/telemetry). Uncomment the first instance of `ENV NEXT_TELEMETRY_DISABLED 1` to disable telemetry during the build. Uncomment the second instance to disable telemetry during runtime._
130+
131+
</div>
132+
</details>
133+
134+
## Build and Run Image Locally
135+
136+
Build and run this image locally with the following commands:
137+
138+
```bash
139+
docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
140+
docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker
141+
```
142+
143+
Open [localhost:3000](http://localhost:3000/) to see your running application.
144+
145+
## Docker Compose
146+
147+
You can also use Docker Compose to build the image and run the container.
148+
149+
<details>
150+
<summary>
151+
Follow steps 1-3 above, click here, and include contents in <code>docker-compose.yml</code>:
152+
</summary>
153+
<div class="content">
154+
155+
```yaml
156+
version: "3.9"
157+
services:
158+
app:
159+
platform: "linux/amd64"
160+
build:
161+
context: .
162+
dockerfile: Dockerfile
163+
args:
164+
NEXT_PUBLIC_CLIENTVAR: "clientvar"
165+
working_dir: /app
166+
ports:
167+
- "3000:3000"
168+
image: t3-app
169+
environment:
170+
- DATABASE_URL=database_url_goes_here
171+
```
172+
173+
Build and run this using the `docker compose up --build` command:
174+
175+
```bash
176+
docker compose up --build
177+
```
178+
179+
Open [localhost:3000](http://localhost:3000/) to see your running application.
180+
181+
</div>
182+
</details>
183+
184+
## Deploy to Railway
185+
186+
You can use a PaaS such as [Railway's](https://railway.app) automated [Dockerfile deployments](https://docs.railway.app/deploy/dockerfiles) to deploy your app. If you have the [Railway CLI installed](https://docs.railway.app/develop/cli#install) you can deploy your app with the following commands:
187+
188+
```bash
189+
railway login
190+
railway init
191+
railway link
192+
railway up
193+
railway open
194+
```
195+
196+
Go to "Variables" and include your `DATABASE_URL`. Then go to "Settings" and select "Generate Domain." To view a running example on Railway, visit [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).
197+
198+
## Useful Resources
199+
200+
| Resource | Link |
201+
| ------------------------------------ | -------------------------------------------------------------------- |
202+
| Dockerfile reference | https://docs.docker.com/engine/reference/builder/ |
203+
| Compose file version 3 reference | https://docs.docker.com/compose/compose-file/compose-file-v3/ |
204+
| Docker CLI reference | https://docs.docker.com/engine/reference/commandline/docker/ |
205+
| Docker Compose CLI reference | https://docs.docker.com/compose/reference/ |
206+
| Next.js Deployment with Docker Image | https://nextjs.org/docs/deployment#docker-image |
207+
| Next.js in Docker | https://benmarte.com/blog/nextjs-in-docker/ |
208+
| Next.js with Docker Example | https://github.com/vercel/next.js/tree/canary/examples/with-docker |
209+
| Create Docker Image of a Next.js app | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ |

‎www/src/pages/vi/deployment/index.astro

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
import IndexPage from "../../../components/docs/indexPage.astro";
3+
import { SIDEBAR, type Frontmatter } from "../../../config";
4+
import { getLanguageFromURL } from "../../../languages";
5+
import Layout from "../../../layouts/docs.astro";
6+
7+
const frontmatter: Frontmatter = {
8+
title: "Deployment",
9+
layout: "docs",
10+
description: "Learn how to deploy your T3 app to production.",
11+
};
12+
13+
const lang = getLanguageFromURL(Astro.url.pathname);
14+
const sidebarEntries = SIDEBAR[lang]["Deployment"]!;
15+
const files = await Astro.glob("./*.{md,mdx,astro}");
16+
---
17+
18+
<Layout frontmatter={frontmatter} headings={[]}>
19+
<IndexPage
20+
frontmatter={frontmatter}
21+
sidebarEntries={sidebarEntries}
22+
files={files}
23+
/>
24+
</Layout>

‎www/src/pages/vi/deployment/netlify.mdx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Netlify
3+
description: Deploying to Netlify
4+
layout: ../../../layouts/docs.astro
5+
lang: en
6+
isMdx: true
7+
---
8+
9+
import Callout from "../../../components/docs/callout.tsx";
10+
11+
Netlify is an alternative deployment provider in a similar vein to Vercel. See [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) for an example repo based on this doc.
12+
13+
## Why Host on Netlify
14+
15+
Conventional wisdom says Vercel has superior Next.js support because Vercel develops Next.js. They have a vested interest in ensuring the platform is tuned for optimal performance and DX with Next.js. For the majority of use cases, this will be true and it won't make sense to deviate from the standard path.
16+
17+
There's also a common sentiment that many Next.js features are only supported on Vercel. While it's true that new Next.js features will be tested and supported on Vercel at the time of release by default, it's also the case that other providers like Netlify will [quickly implement and release support](https://www.netlify.com/blog/deploy-nextjs-13/) for [stable Next.js features](https://docs.netlify.com/integrations/frameworks/next-js/overview/).
18+
19+
There are relative pros and cons for all deployment providers since no single host can have the best support for all use cases. For example, Netlify built their own [custom Next.js runtime](https://github.com/netlify/next-runtime) for Netlify's Edge Functions (which run on Deno Deploy) and [maintain unique middleware to access and modify HTTP responses](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
20+
21+
<Callout type="info">
22+
To track the status of non-stable Next 13 features see [Using the Next 13
23+
`app` directory on
24+
Netlify](https://github.com/netlify/next-runtime/discussions/1724).
25+
</Callout>
26+
27+
## Project Configuration
28+
29+
There are numerous ways to configure your build instructions including directly through the Netlify CLI or Netlify dashboard. While not required, it is advisable to create and include a [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/) file. This ensures that forked and cloned versions of the project will be easier to reproducibly deploy.
30+
31+
```toml
32+
[build]
33+
command = "next build"
34+
publish = ".next"
35+
```
36+
37+
## Using the Netlify Dashboard
38+
39+
1. Push your code to a GitHub repository and sign up for [Netlify](https://app.netlify.com/signup). After you've created an account, click on **Add new site** and then **Import an existing project**.
40+
41+
![New project on Netlify](/images/netlify-01-new-project.webp)
42+
43+
2. Connect your Git provider.
44+
45+
![Import repository](/images/netlify-02-connect-to-git-provider.webp)
46+
47+
3. Select your project's repository.
48+
49+
![Select your project's repository](/images/netlify-03-pick-a-repository-from-github.webp)
50+
51+
4. Netlify will detect if you have a `netlify.toml` file and automatically configure your build command and publish directory.
52+
53+
![Nextjs build settings](/images/netlify-04-configure-build-settings.webp)
54+
55+
5. Click **Show advanced** and then **New variable** to add your environment variables.
56+
57+
![Add environment variables](/images/netlify-05-env-vars.webp)
58+
59+
6. Click **Deploy site**, wait for the build to complete, and view your new site.
60+
61+
## Using the Netlify CLI
62+
63+
To deploy from the command line you must first push your project to a GitHub repo and [install the Netlify CLI](https://docs.netlify.com/cli/get-started/). You can install `netlify-cli` as a project dependency or install it globally on your machine with the following command:
64+
65+
```bash
66+
npm i -g netlify-cli
67+
```
68+
69+
To test your project locally, run the [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment) command and open [`localhost:8888`](http://localhost:8888/) to view your locally running Netlify app:
70+
71+
```bash
72+
ntl dev
73+
```
74+
75+
Run the [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) command to configure your project:
76+
77+
```bash
78+
ntl init
79+
```
80+
81+
Import your project's environment variables from your `.env` file with [`ntl env:import`](https://cli.netlify.com/commands/env#envimport):
82+
83+
```bash
84+
ntl env:import .env
85+
```
86+
87+
Deploy your project with [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). You'll need to pass the `--build` flag to run the build command before deployment and the `--prod` flag to deploy to your site's main URL:
88+
89+
```bash
90+
ntl deploy --prod --build
91+
```
92+
93+
To view a running example on Netlify, visit [ct3a.netlify.app](https://ct3a.netlify.app/).

0 commit comments

Comments
 (0)