FolderStructure.dev

Next.js Pages Router Project Structure

Traditional Pages Router with getServerSideProps and getStaticProps. Stable and well-documented.

#nextjs #react #typescript #web #frontend
PNGPDF

Project Directory

my-app/
pages/
File-based routing
_app.tsx
App wrapper (required)
_document.tsx
HTML document customization
index.tsx
Home page (/)
404.tsx
Custom 404 page
500.tsx
Custom error page
about.tsx
Route: /about
blog/
index.tsx
Route: /blog
[slug].tsx
Dynamic: /blog/:slug
auth/
login.tsx
register.tsx
api/
API routes
health.ts
GET /api/health
users/
index.ts
GET/POST /api/users
[id].ts
GET/PUT/DELETE /api/users/:id
components/
common/
Shared components
Button.tsx
Input.tsx
Card.tsx
layout/
Layout.tsx
Main layout wrapper
Header.tsx
Footer.tsx
lib/
api.ts
API client functions
utils.ts
hooks/
Custom React hooks
useAuth.ts
useFetch.ts
styles/
globals.css
Home.module.css
CSS Modules example
public/
favicon.ico
images/
types/
TypeScript types
index.ts
next.config.js
package.json
tsconfig.json
.env.local
.env.example
.gitignore

Why This Structure?

The Pages Router is Next.js's original routing system—stable, well-documented, and widely used. Each file in pages/ becomes a route. Data fetching uses getServerSideProps (SSR) or getStaticProps (SSG). This structure is simpler to learn and has broader library compatibility.

Key Directories

  • pages/-Each file = route. index.tsx = /, about.tsx = /about
  • pages/api/-Serverless API endpoints
  • components/-Reusable React components
  • hooks/-Custom React hooks
  • styles/-CSS files and CSS Modules

Special Files & Patterns

  • _app.tsx-Wraps all pages—add global providers here
  • _document.tsx-Custom HTML document structure
  • [param].tsx-Dynamic route segments
  • [...slug].tsx-Catch-all routes
  • [[...slug]].tsx-Optional catch-all

Data Fetching

  • getServerSideProps-SSR—runs on every request
  • getStaticProps-SSG—runs at build time
  • getStaticPaths-Generate paths for dynamic SSG
  • SWR / React Query-Client-side data fetching

Getting Started

npx create-next-app@latest my-app --no-app
cd my-app
cp .env.example .env.local
npm run dev
# Open http://localhost:3000

When To Use This

  • Teams familiar with Pages Router
  • Projects needing maximum library compatibility
  • Migrating from older Next.js versions
  • Simpler mental model preferred
  • Projects with existing Pages Router codebase

Trade-offs

  • No Server Components-All components are Client Components
  • Layout per-page-Layouts remount on navigation (no persistence)
  • Future direction-App Router is the recommended path forward