learning Next.js basics - layouts& pages w/ routing

>>> Next.js does not replace React components; it adds conventions and capabilities around them.

1. Official Next.js — Layouts and Pages

Next.js: Layouts and Pages tutorial

It teaches the routing concepts in a logical order:

Concept	Example
Home route	app/page.tsx → /
Static route	app/about/page.tsx → /about
Nested route	app/blog/page.tsx → /blog
Dynamic route	app/blog/[slug]/page.tsx → /blog/hello
Shared layout	layout.tsx
Navigation	<Link>
Route parameters	params
Query parameters	searchParams

 

 

KEY IDEA

app/
│
├── page.jsx → /
│
├── about/
│ └── page.jsx → /about
│
├── products/
│ ├── page.jsx → /products
│ │
│ └── [id]/
│ └── page.jsx → /products/123
│
└── layout.jsx

 

 

2. Then do the official App Router Getting Started material

Next.js App Router — Getting Started

It covers the broader framework around routing—installation, project structure, layouts/pages, navigation, and Server/Client Components.