Jump to content

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/server.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=