Skip to content

Latest commit

 

History

History
83 lines (59 loc) · 2.2 KB

README.md

File metadata and controls

83 lines (59 loc) · 2.2 KB

Next.js App Router SEO Example

A practical example of building an SEO-friendly ecommerce site using Next.js App Router, demonstrating dynamic metadata, server/client component patterns, and data fetching strategies.

Tech Stack

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Axios

Features

  • Static metadata in root layout (title template, Open Graph, Twitter cards, robots)
  • Dynamic generateMetadata for product pages (title, description, OG image from API)
  • Server-side data fetching for SEO-critical content
  • Server + Client component pattern (server fetch → pass props → client interactivity)
  • Axios instance with base URL, interceptors, and timeout config
  • Responsive product grid and detail page with dark mode support

Project Structure

src/
├── app/
│   ├── layout.tsx                  # Root layout — static SEO metadata
│   ├── page.tsx                    # Home — server-rendered product listing
│   ├── globals.css
│   └── products/
│       └── [id]/
│           ├── page.tsx            # Server component — generateMetadata + fetch
│           └── product-detail.tsx  # Client component — useEffect, interactivity
├── lib/
│   └── axios.ts                    # Axios instance
└── types/
    └── product.ts                  # Shared Product interface

Getting Started

1. Install dependencies

pnpm install

2. Set up environment variables

Copy the example env file and update as needed:

cp .env.example .env
NEXT_PUBLIC_API_BASE_URL=https://fakestoreapi.com

3. Run the development server

pnpm dev

Open http://localhost:3000 to see the product listing.

Documentation

See docs/nextjs-seo-data-fetching-guide.md for a detailed guide on:

  • SEO metadata (static vs dynamic)
  • Server vs Client components
  • Data fetching patterns (parallel, sequential, hybrid, client-only)
  • Decision guide for choosing the right approach

API

This project uses Fake Store API for demo product data.

License

MIT