Next.js (App Router) project structure

Next.js (App Router) project structure

Explorer

  • .git…
  • .huskynew
  • pre-commitnew
  • commit-msgnew
  • .next…, not committed
  • .vscodenew
  • settings.jsonnew
  • extensions.jsonnew
  • launch.jsonnew
  • coverage…new, not committed
  • messagesnew
  • en.jsonnew
  • ur.jsonnew
  • node_modules…, not committed
  • public
  • file.svg
  • globe.svg
  • next.svg
  • vercel.svg
  • window.svg
  • logo.svgnew
  • src
  • proxy.tsnew
  • .editorconfig
  • .env.examplenew
  • .env.localnew, not committed
  • .gitignore
  • .nvmrc
  • .prettierignorenew
  • .prettierrc.jsonnew
  • AGENTS.md
  • CLAUDE.mdnew
  • README.md
  • commitlint.config.mjsnew
  • docker-compose.ymlnew
  • eslint.config.mjs
  • next-env.d.ts, not committed
  • next.config.ts
  • package-lock.json
  • package.json
  • tsconfig.json
  • vitest.config.mtsnew
  • vitest.setup.tsnew

  1. # Create the app with the recommended defaults, code inside src/

    npx create-next-app@latest my-app --yes --src-dir

  2. # Start the dev server on localhost:3000

    cd my-app && npm run dev

  3. # Add the React app layer: data fetching, theme, toasts, forms, state

    npm install @tanstack/react-query next-themes sonner react-hook-form @hookform/resolvers zod zustand server-only

  4. # Add unit and component tests (Vitest, Testing Library, MSW)

    npm install -D vitest @vitejs/plugin-react jsdom vite-tsconfig-paths @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom msw

  5. # Add end-to-end tests (Playwright)

    npm init playwright@latest

  6. # Add Storybook when the design system grows

    npm create storybook@latest