Mappestruktur

Det som følger er mappestrukturen til en nylig opprettet T3-app, med alle alternativer valgt.

Lenger nede angis hver mappebeskrivelse formålet med mappen, og om den kun er inkludert i utvalgte biblioteker.

.
├─ prisma
│  └─ schema.prisma
├─ public
│  └─ favicon.ico
├─ src
│  ├─ env
│  │  ├─ client.mjs
│  │  ├─ schema.mjs
│  │  └─ server.mjs
│  ├─ pages
│  │  ├─ api
│  │  │  ├─ auth
│  │  │  │  └─ [...nextauth].ts
│  │  │  ├─ trpc
│  │  │  │  └─ [trpc].ts
│  │  │  ├─ examples.ts
│  │  │  └─ restricted.ts
│  │  ├─ _app.tsx
│  │  └─ index.tsx
│  ├─ styles
│  │  └─ globals.css
│  ├─ types
│  │  └─ next-auth.d.ts
│  ├─ utils
│  │  └─ trpc.ts
│  ├─ server
│  │  ├─ common
│  │  │  └─ get-server-auth-session.ts
│  │  ├─ db
│  │  │  └─ client.ts
│  │  └─ trpc
│  │     ├─ router
│  │     │  ├─ _app.ts
│  │     │  ├─ auth.ts
│  │     │  └─ example.ts
│  │     ├─ context.ts
│  │     └─ trpc.ts
├─ .env
├─ .env.example
├─ .eslintrc.json
├─ next-env.d.ts
├─ next.config.mjs
├─ postcss.config.cjs
├─ prettier.config.cjs
├─ tailwind.config.cjs
└─ tsconfig.json

prisma

prisma-mappen inneholder schema.prisma-filen som brukes til å konfigurere databasetilkoblingen og databaseskjemaet. Det er også stedet for å lagre migreringsfiler og/eller seedscript, dersom de brukes. Se Bruk av Prisma for mer informasjon.

_{(Med Prisma)}

public

public-mappen inneholder statiske ressurser som betjenes av webserveren. favicon.ico-filen er et eksempel på en statisk ressurs.

src/env

Brukes for validering av miljøvariabler og typedefinisjoner - se Miljøvariabler.

src/pages

pages-mappen inneholder alle sidene til Next.js-applikasjonen. index.tsx-filen i rotkatalogen til /pages er hjemmesiden til applikasjonen. Filen _app.tsx brukes til å pakke applikasjonen sammen med providers. Se Next.js-dokumentasjon↗ for mer informasjon.

src/pages/api

Mappen api inneholder alle API-rutene til Next.js-applikasjonen. Filen examples.ts (med Prisma) inneholder et eksempel på en rute som bruker Next.js API-rute↗-funksjonaliteten sammen med Prisma. restricted.ts-filen (med Next-Auth) inneholder et eksempel på en rute som bruker Next.js API-rute↗-funksjonaliteten, og er beskyttet av NextAuth.js↗.

_{(Med NextAuth.js, tRPC eller tRPC + Prisma)}

src/pages/api/auth/[...nextauth].ts

[...nextauth].ts-filen er autentiseringsslug-ruten for NextAuth.js. Den brukes til å håndtere autentiseringsforespørsler. Se Bruk av NextAuth.js for mer informasjon om NextAuth.js, og Next.js Dynamic Routes Docs↗ for informasjon på catch-all/slug-ruter.

_{(med NextAuth.js)}

src/pages/api/trpc/[trpc].ts

[trpc].ts-filen er inngangspunktet for tRPC-APIet. Den brukes til å håndtere tRPC-forespørsler. Se Bruk av tRPC for mer informasjon om denne filen, og Next.js Dynamic Routes Docs↗ for informasjon om catch-all/slug-ruter.

_{(med tRPC)}

src/server

server-mappen brukes til å tydelig skille serverside-kode fra klientside-kode.

_{(med tRPC og/eller Prisma)}

src/server/common

common-mappen inneholder ofte gjenbrukt kode på serversiden.

_{(med NextAuth.js + tRPC)}

src/server/common/get-server-auth-session.ts

get-server-auth-session.ts-filen brukes til å hente NextAuth.js-sesjonen på serversiden. Se Bruk av NextAuth.js for mer informasjon.

_{(med NextAuth.js + tRPC)}

src/server/db/client.ts

client.ts-filen brukes til å instansiere Prisma-klienten globalt. Se Bruk av Prisma for mer informasjon.

_{(med Prisma)}

src/server/trpc

trpc-mappen inneholder tRPC serverside-koden.

_{(med tRPC)}

src/server/trpc/context.ts

context.ts-filen brukes til å lage konteksten som brukes i tRPC-forespørsler. Se Bruk av tRPC for mer informasjon.

_{(med tRPC)}

src/server/trpc/trpc.ts

trpc.ts-filen brukes til å eksportere prosedyrehjelpere. Se Bruk av tRPC for mer informasjon.

_{(med tRPC)}

src/server/trpc/router

router-mappen inneholder tRPC-ruterne.

_{(med tRPC)}

src/server/trpc/router/_app.ts

_app.ts-filen brukes til å slå sammen tRPC-rutere og eksportere dem som en enkelt ruter, i tillegg til typedefinisjonene. Se Bruk av tRPC for mer informasjon på.

_{(med tRPC)}

src/server/trpc/router/auth.ts

auth.ts-filen er et eksempel på en tRPC-ruter som bruker protectedProcedure-hjelperen for å demonstrere hvordan man beskytter en tRPC-rute med NextAuth.js.

_{(med NextAuth.js + tRPC)}

src/server/trpc/router/example.ts

example.ts-filen er et eksempel på en tRPC-ruter som bruker publicProcedure-hjelperen for å demonstrere hvordan man oppretter en offentlig tRPC-rute.

_{(med tRPC)}

src/styles

stiler-mappen inneholder det globale stilsettet til applikasjonen.

_{(med Tailwind CSS)}

src/types

types-mappen brukes til å lagre gjenbrukte typer eller typedeklarasjoner.

_{(med NextAuth.js)}

src/types/next-auth.d.ts

next-auth.d.ts-filen brukes til å utvide standardsesjonstypen til NextAuth for å inkludere user ID. Se Bruk av NextAuth.js for mer informasjon.

_{(med NextAuth.js)}

src/utils

utils-mappen brukes til å lagre ofte gjenbrukte verktøyfunksjoner.

_{(med tRPC)}

src/utils/trpc.ts

trpc.ts-filen er frontendinngangspunktet til tRPC. Se Bruk av tRPC for mer informasjon.

_{(med tRPC)}

.env

.env-filen brukes til å lagre miljøvariabler. Se Miljøvariabler for mer informasjon. Denne filen skal ikke commites til git-historikk.

.env.example

.env.example-filen viser noen eksempler på miljøvariabler basert på valgte bibliotek. Denne filen skal commites til git-historikk.

.eslintrc.json

.eslintrc.json-filen brukes til å konfigurere ESLint. Se ESLint Docs↗ for mer informasjon.

neste-env.d.ts

next-env.d.ts-filen sikrer at Next.js-typer blir plukket opp av TypeScript-kompilatoren. Du bør ikke fjerne den eller redigere den, da den kan endres når som helst. Se Next.js Docs↗ for mer informasjon.

neste.config.mjs

next.config.mjs-filen brukes til å konfigurere Next.js. Se Next.js Docs↗ for mer informasjon. Merk: .mjs-utvidelsen brukes for å tillate ESM-import.

postcss.config.cjs

postcss.config.cjs-filen er for bruk av Tailwind PostCSS. Se Tailwind PostCSS Docs↗ for mer informasjon.

_{(med Tailwind CSS)}

prettier.config.cjs

prettier.config.cjs-filen brukes til å konfigurere Prettier slik at prettier-plugin-tailwindcss inkluderes for formatering av Tailwind CSS-klasser. Se Tailwind CSS-blogginnlegget↗ for mer informasjon.

_{(med Tailwind CSS)}

tsconfig.json

Filen tsconfig.json brukes til å konfigurere TypeScript. Noen ikke-standardinnstillinger, som for eksempel strict mode, har blitt aktivert for å sikre best mulig bruk av TypeScript i create-t3-app og tilhørende biblioteker. Se TypeScript Docs↗ eller TypeScript Usage for mer informasjon.