Create a new Next.js app:

npx create-next-app

Run the development server:

npm run dev

Official Next.js Docs – Project Structure

Install the ES7+ React/Redux/React-Native/GraphQL Snippets extension in VS Code:

• Name: ES7 React/Redux/GraphQL/React-Native snippets
• Marketplace: Download here

Usage: Type rfce in a .jsx or .tsx file to quickly generate a React functional component boilerplate.

Next.js uses a file-based routing system inside the app/ directory.

Create a new folder inside the app/ directory and add a page.jsx file.

Example:

 app/
 └─ about/
 └─ page.jsx

This automatically generates the /about route.

You can nest routes by creating subfolders:

Example:

 app/
 └─ dashboard/
 ├─ page.jsx → /dashboard
 └─ settings/
 └─ page.jsx → /dashboard/settings

For dynamic pages, use square brackets in the folder name:

 app/
 └─ blog/
 └─ [slug]/
 └─ page.jsx

This generates routes like:

• /blog/my-first-post
• /blog/another-article

When building the app:

• ○しろまる indicates a static page (pre-rendered at build time).
• ƒ indicates a dynamic route (server-rendered on demand). 📖 Dynamic Routes Documentation

• error
• loading
• not-found

See Documentation