Jump to content

Attention: This page is 61 days older than the English version and might be outdated. If you're a native speaker of this language and would like to contribute to the project, please consider updating this page to match the latest English version.

You can also view the English version of this page.

Milj√łvariabler

create-t3-app bruker Zod‚Üó for √• validere milj√łvariablene dine ved kj√łretid og ved byggetidspunkt. Ytterligere filer er angitt i env-katalogen for dette form√•let:

ūüďĀ src/env

‚Ē£ ūüďĄ client.mjs

‚Ē£ ūüďĄ schema.mjs

‚Ē£ ūüďĄ server.mjs

Innholdet i disse filene kan virke skummelt til √• begynne med, men ikke til bekymring, det er ikke s√• komplisert som det ser ut til. La oss se p√• disse en etter en og p√• hvordan du legger til flere milj√łvariabler.

TLDR; Hvis du vil legge til en ny milj√łvariabel, m√• du definere den i b√•de .env og env/schema.mjs.

schema.mjs

Endringene skjer i denne filen. Den inneholder to skjemaer, ett for servermilj√łvariabler og ett for klientmilj√łvariabler, og et clientEnv-objekt.

env/schema.mjs
export const serverSchema = z.object({
  // DATABASE_URL: z.string().url(),
});

export const serverEnv = {
  // DATABASE_URL: process.env.DATABASE_URL,
};

export const clientSchema = z.object({
  // NEXT_PUBLIC_WS_KEY: z.string(),
});

export const clientEnv = {
  // NEXT_PUBLIC_WS_KEY: process.env.NEXT_PUBLIC_WS_KEY,
};

Oppsett av Serverskjema

Definer skjemaet for servermilj√łvariablene her.

Pass p√• at du ikke bruker n√łkler med prefikset NEXT_PUBLIC her. Validering vil mislykkes hvis du gj√łr dette for √• hjelpe deg med √• oppdage en ugyldig konfigurasjon.

Oppsett av Klientskjema

Definer ditt skjema for klientmilj√łvariabeler her.

For √• gj√łre dem tilgjengelige for klienten, m√• du prefiksere dem med NEXT_PUBLIC. Validering vil mislykkes hvis du ikke gj√łr det, for √• hjelpe deg med √• oppdage en ugyldig konfigurasjon.

clientEnv-Objektet

I denne filen må vi få tilgang til verdiene fra process.env-objektet.

Vi trenger et JavaScript-objekt som vi kan analysere gjennom Zod-skjemaene og p√• grunn av m√•ten Next.js h√•ndterer milj√łvariabler kan vi ikke destrukturere process.env-objektet som et normalt objekt. Derfor m√• vi gj√łre det manuelt.

TypeScript vil hjelpe deg med √• s√łrge for at du legger n√łklene i b√•de clientEnv og clientSchema.

// ‚ĚĆ Dette fungerer ikke. Vi m√• destrukturere den manuelt.
const schema = z.object({
  NEXT_PUBLIC_WS_KEY: z.string(),
});

const validated = schema.parse(process.env);

server.mjs & client.mjs

Her foreg√•r valideringen og de validerte objektene eksporteres. Du b√łr ikke redigere disse filene.

Bruk Milj√łvariabler

Hvis du vil bruke milj√łvariablene dine, kan du importere dem fra env/client.mjs eller env/server.mjs avhengig av hvor du vil bruke dem:

pages/api/hello.ts
import { env } from "../../env.mjs";

// `env` er helt typesikker og tillater autofullf√łring
const dbUrl = env.DATABASE_URL;

.env.example

Siden standard .env-filen ikke er versjonert, har vi ogs√• inkludert en .env.example-fil der du eventuelt kan lagre en kopi av .env-filen din med eventuelle hemmeligheter fjernet. Dette er ikke n√łdvendig, men vi anbefaler √• holde eksempelfilen oppdatert for √• gj√łre det s√• enkelt som mulig for bidragsytere √• f√• milj√łet sitt i gang.

Legg til Milj√łvariabler

For √• sikre at builden aldri fullf√łres uten milj√łvariablene som prosjektet trenger, m√• du legge til nye milj√łvariabler to steder:

ūüďĄ .env: Skriv milj√łvariabelen din her slik du vanligvis ville gjort i en .env-fil, f.eks. KEY=VALUE

ūüďĄ schema.mjs: Legg til riktig valideringslogikk for milj√łvariabelen ved √• definere et Zod-skjema, f.eks. KEY: z.string()

I tillegg kan du også oppdatere .env.example:

ūüďĄ .env.example: Legg til milj√łvariabelen din, men ikke glem √• fjerne verdien hvis den er hemmelig, for eksempel KEY=VALUE eller KEY=

Eksempel

Jeg vil legge til min Twitter API-token som en servermilj√łvariabel

  1. Legg til milj√łvariabelen i filen ‚Äú.env‚ÄĚ:
TWITTER_API_TOKEN=1234567890
  1. Legg til milj√łvariabelen i schema.mjs:
export const serverSchema = z.object({
  // ...
  TWITTER_API_TOKEN: z.string(),
});

export const serverEnv = {
  // ...
  TWITTER_API_TOKEN: process.env.TWITTER_API_TOKEN,
};

MERK: En tom streng er fortsatt en streng, s√• z.string() vil godta en tom streng som en gyldig verdi. Hvis du vil forsikre deg om at milj√łvariabelen ikke er tom, kan du bruke z.string().min(1).

  1. Valgfritt: Inkluder milj√łvariabelen i .env.example, men ikke glem √• fjerne verdien
TWITTER_API_TOKEN=