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.