README.prod.md

{Project Name}

A Next.js application built with modern tooling and best practices. For detailed documentation about initial configuration, features and architecture, visit the template repository.

Scripts

Run the development server

pnpm dev

Building for production

pnpm build

Run in production mode

pnpm start

Run Storybook server

pnpm storybook

Build Storybook as a static web application

pnpm build-storybook

Project directory structure

The template follows a modular architecture with clear separation of concerns:

Main folder structure

📂 app
  📂 [locale]
    ...📂 {path}
      📄 page.client.tsx
      📄 page.tsx
    📄 page.client.tsx
    📄 page.tsx
    📄 layout.tsx
    📄 error.tsx

  📂 api
    📂 test
      📄 route.ts
    ...📂 {other-apis}

  📄 actions.ts
  📄 layout.tsx
  📄 not-found.tsx
  📄 error.tsx
  📄 global-error.tsx
  📄 providers.tsx

📂 components
  📂 common
  📂 layout
  📂 hooks
  📄 utils.ts
  ...📄 {Component}.tsx
  ...📂 {page}
     ...📄 {Component}.tsx

📂 lib
  📂 data
    ...📄 {service}.ts
  📂 types
    ...📄 {type}.ts
  📂 utils
    ...📄 {context}.ts

📂 public
  📂 favicons
  📂 icons
  📂 images

📂 stories
  📂 examples
  ...📄 {Component}.stories.tsx
  ...📂 {page}
     ...📄 {Component}.stories.tsx

📂 styles
  📄 globals.scss

📂 i18n
  📂 locales
    ...📂 {locale}
      📄 common.json
      ...📄 {namespace}.json
  📄 client.ts
  📄 server.ts
  📄 utils.ts

Project's main tech stack useful resources

React

• React Documentation - Official React documentation
• W3Schools React tutorial - Step-by-step guide to learning React.

Next.js

• Learn Next.js - Interactive Next.js tutorial, the best way to start with next.js if you are new.
• Next.js Documentation - Features and API reference

Tooling

• TanStack Query - Data fetching & caching
• Jotai Documentation - Atomic state management
• Tailwind CSS - Utility-first CSS
• TypeScript Handbook - TypeScript guide