Getting Started
Project structure
A tour of what Nextkit generates. The exact files depend on the options you choose, but the foundation is always a standard Next.js App Router project.
A typical layout
With the defaults (a src/ directory, Tailwind, and shadcn/ui) a generated project looks roughly like this:
my-app
my-app/├─ src/ # your application code (or app/ at root if you opt out)│ ├─ app/ # Next.js App Router — routes, layouts, pages│ │ ├─ layout.tsx # root layout│ │ └─ page.tsx # home page│ ├─ providers/ # client providers (theme, query client, auth, …)│ ├─ libs/ # shared helpers, e.g. utils.ts│ └─ styles/ # global stylesheet(s)├─ public/ # static assets├─ next.config.js # Next.js configuration├─ tsconfig.json # TypeScript config (with your import alias)├─ package.json└─ .gitignoreIt depends on your choices
Each integration adds its own files. Picking an ORM adds a schema and a database client; picking auth adds route handlers, providers, and env entries; an API layer adds its own folder. The pages under Your stack describe what each one contributes.
Key directories
- app/ — the App Router. Routes, layouts, and server components live here.
- providers/ — client-side context providers that wrap your app (theme, data fetching, auth session, and so on).
- libs/ — shared utilities, such as the
cn()class-name helper used with Tailwind and shadcn/ui. - styles/ — the global stylesheet where Tailwind's layers are imported.
Environment variables
Integrations that need secrets (auth, payments, email, analytics) add the required keys to your env file. Fill them in before using those features — each stack page lists the variables it expects.
It's yours
After generation there's no lock-in. The result is a plain Next.js project with no runtime dependency on the CLI, so you're free to rename, move, or remove anything.