-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: Dutch translations #1807
base: main
Are you sure you want to change the base?
docs: Dutch translations #1807
Changes from all commits
0dd13d6
e108cd8
54e528f
35f8e8d
bcbfd25
9b68ea9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,208 @@ | ||
--- | ||
title: Docker | ||
description: Uitrollen met Docker | ||
layout: ../../../layouts/docs.astro | ||
lang: nl | ||
--- | ||
|
||
Je kan deze stack containeriseren en uitrollen als één enkele container door middel van Docker. Het is ook mogelijk om de stack uit te rollen als gedeelte van een grotere groep containers door middel van docker-compose. Zie [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) voor een voorbeeld-repository gebasseerd op deze documentatie. | ||
|
||
## Docker Projectconfiguratie | ||
|
||
Merk op dat Next.js een ander proces gebruikt voor variablen beschikbaar in de build- (beschikbaar in de frontent, voorafgaand door `NEXT_PUBLIC`) en runtime-omgeving (enkel server-side). In deze demo maken we gebruik van twee variablen, let op hun posities in het `Dockerfile`, in de commandoregelargumenten en in het `docker-compose.yml` bestand: | ||
- `DATABASE_URL` (wordt gebruikt door de server) | ||
- `NEXT_PUBLIC_CLIENTVAR` (wordt gebruikt door de client) | ||
|
||
### 1. Next-configuratie | ||
|
||
Voeg in je [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js) de `standalone` output optie toe om [de afbeeldingsgrootte te verkleinen door automatisch gebruik te maken van output traces](https://nextjs.org/docs/advanced-features/output-file-tracing): | ||
|
||
```diff | ||
export default defineNextConfig({ | ||
reactStrictMode: true, | ||
swcMinify: true, | ||
+ output: "standalone", | ||
}); | ||
``` | ||
|
||
### 2. Maak het dockerignore-bestand | ||
|
||
<details> | ||
<summary> | ||
Klik hier en plaats de inhoud in <code>.dockerignore</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
``` | ||
.env | ||
Dockerfile | ||
.dockerignore | ||
node_modules | ||
npm-debug.log | ||
README.md | ||
.next | ||
.git | ||
``` | ||
|
||
</div> | ||
|
||
</details> | ||
|
||
### 3. Maak het Dockerfile | ||
|
||
> Omdat we de serveromgevingsvariabelen niet in onze container trekken, zal [de validatie van het omgevingsschema](/nl/usage/env-variables) mislukken. Om dit te voorkomen moeten we een `SKIP_ENV_VALIDATION=1` flag aan het bouwcommando toevoegen zodat de env-schema's niet gevalideerd worden tijdens het bouwen. | ||
<details> | ||
<summary> | ||
Klik hier en plaats de inhoud in <code>Dockerfile</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
```docker | ||
##### DEPENDENCIES | ||
FROM --platform=linux/amd64 node:20-alpine AS deps | ||
RUN apk add --no-cache libc6-compat openssl | ||
WORKDIR /app | ||
# Installeer Prisma Client - verwijder als je Prisma niet gebruikt | ||
COPY prisma ./ | ||
# Installeer dependencies met de gewenste package manager | ||
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./ | ||
RUN \ | ||
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ | ||
elif [ -f package-lock.json ]; then npm ci; \ | ||
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \ | ||
else echo "Lockfile not found." && exit 1; \ | ||
fi | ||
##### BUILDER | ||
FROM --platform=linux/amd64 node:20-alpine AS builder | ||
ARG DATABASE_URL | ||
ARG NEXT_PUBLIC_CLIENTVAR | ||
WORKDIR /app | ||
COPY --from=deps /app/node_modules ./node_modules | ||
COPY . . | ||
# ENV NEXT_TELEMETRY_DISABLED 1 | ||
RUN \ | ||
if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \ | ||
elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \ | ||
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \ | ||
else echo "Lockfile not found." && exit 1; \ | ||
fi | ||
##### RUNNER | ||
FROM --platform=linux/amd64 gcr.io/distroless/nodejs20-debian12 AS runner | ||
WORKDIR /app | ||
ENV NODE_ENV production | ||
# ENV NEXT_TELEMETRY_DISABLED 1 | ||
COPY --from=builder /app/next.config.js ./ | ||
COPY --from=builder /app/public ./public | ||
COPY --from=builder /app/package.json ./package.json | ||
COPY --from=builder /app/.next/standalone ./ | ||
COPY --from=builder /app/.next/static ./.next/static | ||
EXPOSE 3000 | ||
ENV PORT 3000 | ||
CMD ["server.js"] | ||
``` | ||
|
||
> **_Opmerkingen_** | ||
> | ||
> - _Emulatie van `--platform=linux/amd64` is mogelijk niet nodig na het overzetten naar Node 18._ | ||
> - _Zie [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) om te begrijpen waarom `libc6-compat` mogelijk nodig is._ | ||
> - _Images gebruiken die gebasseerd zijn op Alpine 3.17 [kan problemen met Prisma opleveren](https://github.com/t3-oss/create-t3-app/issues/975). `engineType = "binary"` lost het probleem in Alpine 3.17 op, [maar heeft de bijbehorende prestatieproblemen](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._ | ||
> - _Next.js verzamelt [anonieme telemetriegegevens over algemeen gebruik](https://nextjs.org/telemetry). Laat de `#` voor het eerste commentaar van `ENV NEXT_TELEMETRY_DISABLED 1` weg om telemetrie uit te schakelen tijdens de build. Doe hetzelfde met het tweede commentaar om telemetrie uit te schakelen tijdens runtime._ | ||
</div> | ||
</details> | ||
|
||
## Lokaal bouwen en uitvoeren | ||
|
||
Bouw en voer dit image lokaal uit met de volgende commando's: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. dit image > deze image |
||
|
||
```bash | ||
docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar . | ||
docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker | ||
``` | ||
|
||
Open [localhost:3000](http://localhost:3000/) om de actieve applicatie te zien. | ||
|
||
## Docker Compose | ||
|
||
Je kan ook Docker Compose gebruiken om je image te bouwen en uit te voeren. | ||
|
||
<details> | ||
<summary> | ||
Volg de stappen 1-3 van hierboven, klik hier en plaats de inhoud in <code>docker-compose.yml</code>: | ||
</summary> | ||
<div class="content"> | ||
|
||
```yaml | ||
version: "3.9" | ||
services: | ||
app: | ||
platform: "linux/amd64" | ||
build: | ||
context: . | ||
dockerfile: Dockerfile | ||
args: | ||
NEXT_PUBLIC_CLIENTVAR: "clientvar" | ||
working_dir: /app | ||
ports: | ||
- "3000:3000" | ||
image: t3-app | ||
environment: | ||
- DATABASE_URL=database_url_goes_here | ||
``` | ||
|
||
Bouw en begin met uitvoeren door het `docker compose up --build` commando: | ||
|
||
```bash | ||
docker compose up --build | ||
``` | ||
|
||
Open [localhost:3000](http://localhost:3000/) om de actieve applicatie te zien. | ||
|
||
</div> | ||
</details> | ||
|
||
## Uitrollen naar Railway | ||
|
||
Je kan een PaaS zoals [Railways](https://railway.app) geautomatiseerde [Dockerfile implementatie](https://docs.railway.app/deploy/dockerfiles) om je applicatie uit te rollen. Als je de [Railway CLI hebt geïnstallerd](https://docs.railway.app/develop/cli#install) kun je de applicatie uitrollen met de volgende commando's: | ||
|
||
```bash | ||
railway login | ||
railway init | ||
railway link | ||
railway up | ||
railway open | ||
``` | ||
|
||
Ga naar "Variables" en neem je `DATABASE_URL`-variable op. Ga vervolgens naar "Settings" en selecteer "Generate Domain". Om een lopend voorbeeld te bekijken op Railway bezoek je [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/). | ||
|
||
## Handige Hulpbronnen | ||
|
||
| Hulpbron | Link | | ||
|----------------------------------------| -------------------------------------------------------------------- | | ||
| Dockerfile-referentie | https://docs.docker.com/engine/reference/builder/ | | ||
| Compose file versie 3-referentie | https://docs.docker.com/compose/compose-file/compose-file-v3/ | | ||
| Docker CLI-referentie | https://docs.docker.com/engine/reference/commandline/docker/ | | ||
| Docker Compose CLI-referentie | https://docs.docker.com/compose/reference/ | | ||
| Next.js Uitrollen met Docker Image | https://nextjs.org/docs/deployment#docker-image | | ||
| Next.js in Docker | https://benmarte.com/blog/nextjs-in-docker/ | | ||
| Next.js met Docker Example | https://github.com/vercel/next.js/tree/canary/examples/with-docker | | ||
| Docker Image van een Next.js-app maken | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ | |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
--- | ||
import IndexPage from "../../../components/docs/indexPage.astro"; | ||
import { SIDEBAR, type Frontmatter } from "../../../config"; | ||
import { getLanguageFromURL } from "../../../languages"; | ||
import Layout from "../../../layouts/docs.astro"; | ||
const frontmatter: Frontmatter = { | ||
title: "Uitrollen", | ||
layout: "docs", | ||
description: "Learn hoe je je T3-app kan uitrollen naar production.", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "Leer hoe je je T3-app kan uitrollen naar production." You can choose between the dutch translation of production "productie", or keep it English because you could reason it being a technical term. |
||
lang: "nl" | ||
}; | ||
const lang = getLanguageFromURL(Astro.url.pathname); | ||
const sidebarEntries = SIDEBAR[lang]["Deployment"]!; | ||
const files = await Astro.glob("./*.{md,mdx,astro}"); | ||
--- | ||
|
||
<Layout frontmatter={frontmatter} headings={[]}> | ||
<IndexPage | ||
frontmatter={frontmatter} | ||
sidebarEntries={sidebarEntries} | ||
files={files} | ||
/> | ||
</Layout> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
--- | ||
title: Netlify | ||
description: Uitrollen met Netlify | ||
layout: ../../../layouts/docs.astro | ||
lang: nl | ||
isMdx: true | ||
--- | ||
|
||
import Callout from "../../../components/docs/callout.tsx"; | ||
|
||
Netlify is een alternatieve uitrolprovider vergelijkbaar met Vercel. Zie [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) voor een voorbeeld-repository gebasseerd op deze documentatie. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. gebasseerd > gebaseerd |
||
|
||
## Waarom Bij Netlify Hosten | ||
|
||
Men verondersteld dat Vercel betere Next.js-ondersteuning heeft omdat Vercel Next.js ontwikkeld. Ze hebben er belang bij om er voor te zorgen dat het platform is afgesteld voor ideale prestaties en een ideale DX met Next.js. In de meeste gevallen zal dit ook waar zijn en is het onlogisch om af te wijken van het standaardpat. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. standaardpat > standaard pad. |
||
|
||
Maar er is ook een algemeen gevoel dat Next.js-functionaliteiten enkel ondersteund worden door Vercel. Hoewel het waar is dat nieuwe Next.js-functionaliteiten standaard getest en ondersteund worden door Vercel zodra ze uitkommen, is het ook het geval dat andere providers zoals Netlify [snel ondersteuning implementeren en vrij geven](https://www.netlify.com/blog/deploy-nextjs-13/) voor [stabiele Next.js functionaliteiten](https://docs.netlify.com/integrations/frameworks/next-js/overview/). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. uitkommen > uitkomen. |
||
|
||
|
||
Er zijn relatieve voors en tegens voor alle uitrolproviders gezien geen enkele host de beste ondersteuning kan hebben voor alle situaties. Netlify hebben bijvoorbeeld hun eigen [op maat gemaakte Next.js runtime](https://github.com/netlify/next-runtime) voor Netlify's Edge Functions (die draaien op Deno Deploy) en [onderhouden unieke middleware om HTTP-responses te openen en te wijzigen](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Netlify hebben > Netlify heeft (in my opinion) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you choose to change this, you would need to change the following as well: |
||
|
||
<Callout type="info"> | ||
Zie [Using the Next 13 `app` directory on Netlify](https://github.com/netlify/next-runtime/discussions/1724) om de status bij te houden van instabiele Next 13-functionaliteiten. | ||
</Callout> | ||
|
||
## Projectconfiguratie | ||
|
||
Er zijn talrijke manieren om je buildinstructies te configureren waaronder direct via de Netlify CLI of het Netlify dashboard. Hoewel niet vereist, is het wijs om een [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/)-bestand te maken en bij te voegen. Dit zorgt ervoor dat geforkte en gekloonde versies van het project makkelijker zijn om reproduceerbaar uit te rollen. | ||
|
||
```toml | ||
[build] | ||
command = "next build" | ||
publish = ".next" | ||
``` | ||
|
||
## Het Netlify Dashboard Gebruiken | ||
|
||
1. Push je code naar een GitHub-repository en meld je aan bij [Netlify](https://app.netlify.com/signup). Kilk nadat je een account hebt gemaakt op **Add new site** en vervolgens **Import an existing project**. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Kilk > Klik |
||
|
||
![Nieuw project bij Netlify](/images/netlify-01-new-project.webp) | ||
|
||
2. Koppel je Git-provider. | ||
|
||
![Repository importeren](/images/netlify-02-connect-to-git-provider.webp) | ||
|
||
3. Selecteer de repository van je project. | ||
|
||
![Selecteer de repository van je project](/images/netlify-03-pick-a-repository-from-github.webp) | ||
|
||
4. Netlify zal kijken of je een `netlify.toml`-bestand hebt en automatisch het buildcommando en de publish-folder configureren. | ||
|
||
![Nextjs build-instellingen](/images/netlify-04-configure-build-settings.webp) | ||
|
||
5. Kilik op **Show advanced** en vervolgens op **New variable** om je omgevingsvariablen toe te voegen. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Kilik > Klik |
||
|
||
![Omgevingsvariablen toevoegen](/images/netlify-05-env-vars.webp) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here you use the dutch translation of Environment Variables, but in config.ts you use the English term. |
||
|
||
6. Klik op **Deploy site**, wacht totdat de build klaar is en bekijk je nieuwe site. | ||
|
||
## De Netlify CLI Gebruiken | ||
|
||
Om vanaf de commandline uit te rollen moet je eerst je project naar een GitHub repo pushen en [de Netlify CLI installeren](https://docs.netlify.com/cli/get-started/). Je kan `netlify-cli` als een projectdependency installeren of het globaal op je machine installeren met het volgende commando: | ||
|
||
```bash | ||
npm i -g netlify-cli | ||
``` | ||
|
||
Om je project lokaal te testen, voer je het [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment)-commando uit en open [`localhost:88888`](http://localhost:8888/) om je lokaal draaiende Netlify-app te bekijken: | ||
|
||
```bash | ||
ntl dev | ||
``` | ||
|
||
Voer het [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment)-commando uit om je project te configureren: | ||
|
||
```bash | ||
ntl init | ||
``` | ||
|
||
Importeer de omgevingsvariablen van je project vanuit het `.env`-bestand met [`ntl env:import`](https://cli.netlify.com/commands/env#envimport): | ||
|
||
```bash | ||
ntl env:import .env | ||
``` | ||
|
||
Rol je project uit met [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). Je zal de `--build` flag mee moet geven aan het commando om voor uitrollen het buildcommando te draaien. Gebruik de `--prod` flag om je site uit te rollen naar de hoofd-URL: | ||
|
||
```bash | ||
ntl deploy --prod --build | ||
``` | ||
|
||
Bezoek [ct3a.netlify.app](https://ct3a.netlify.app/) om een werkend voorbeeld te bekijken op Netlify. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In other languages, this title is translated in the language of the translation. So this would be: "Eerste Stappen".