# Next.js App Router: Beginner Guide (JavaScript) This guide teaches you how to build a Next.js app using the **App Router**. It uses simple English and step-by-step examples. --- ## Why App Router? How is it different from the Pages Router? The App Router is the **new way** to build apps in Next.js (introduced in Next.js 13+). It is **better** than the old Pages Router for most cases. **Main differences:** - **Folder** → App Router uses `app/` instead of `pages/`. - **Server Components by default** → Code runs on the server unless you add `"use client"`. - **Layouts** → Each folder can have a `layout.js` file to keep navigation or headers the same across pages. - **Simple data fetching** → Just use `fetch()`. No need for `getStaticProps` or `getServerSideProps`. - **Future proof** → App Router is the future of Next.js. Pages Router is now considered “legacy”. 👉 If you’re starting fresh, always use the **App Router**. --- ## Simple Project Structure When you first run: ```bash npx create-next-app@latest my-app cd my-app npm run dev ``` You’ll see a structure like this: ``` my-app/ ├─ app/ │ ├─ page.js │ ├─ layout.js │ ├─ globals.css ├─ components/ │ └─ Button.jsx ├─ public/ │ └─ logo.png ├─ package.json ``` **What these are:** - **app/** → The main folder for your app. - **page.js** → The home page (`/`). - **layout.js** → Wraps around all pages (good for header/footer). - **globals.css** → Global styles. - **components/** → Reusable UI pieces like buttons. - **public/** → Images or static files. - **package.json** → Project details and dependencies. That’s it! Keep it simple. --- ## Create Your First Pages ### 1) Home Page (`/`) File: `app/page.js` ```javascript export default function Home() { return (

Welcome to Next.js App Router

This is the home page.

); } ``` ### 2) About Page (`/about`) Make a folder `app/about/` and inside it add `page.js`: ```javascript export default function About() { return (

About

This page explains about our website.

); } ``` ### 3) Blog Page with Dynamic Route (`/blog/[slug]`) Make folders: `app/blog/[slug]/page.js` ```javascript export default function BlogPost({ params }) { return (

Blog Post: {params.slug}

This is a blog page that changes with the URL.

); } ``` Now visiting `/blog/hello-world` shows “Blog Post: hello-world”. --- ## Best Practices ### 1) Use Components Break down UI into small reusable pieces. `components/Button.jsx`: ```javascript "use client"; export default function Button({ children, onClick }) { return ( ); } ``` Use it inside a page: ```javascript import Button from "@/components/Button"; export default function Actions() { return (

Try the Button

); } ``` ### 2) Use `layout.js` The `layout.js` file is **special** in the App Router. It is like a template that **wraps around your pages**. For example, your header and footer can live in `layout.js`, so you don’t have to copy them into every page. - Each folder can have its own `layout.js`. The one at `app/layout.js` is the root layout (wraps the whole site). - If you add `app/dashboard/layout.js`, it will wrap only the dashboard pages. - Layouts stay **persistent** when navigating between pages (navigation feels faster). Example: `app/layout.js` ```javascript import "./globals.css"; import Link from "next/link"; export const metadata = { title: "My App", description: "A beginner Next.js app", }; export default function RootLayout({ children }) { return (

{children} ); } ``` 👉 Key idea: **layout.js keeps shared UI in one place**, so you don’t repeat yourself. ### 3) Organize Code - Keep reusable UI in `components/` - Keep routes in `app/` - Use `layout.js` for shared UI ### 4) Environment Variables Create `.env.local`: ``` NEXT_PUBLIC_API_URL=https://example.com ``` Use it in your code: ```javascript const apiUrl = process.env.NEXT_PUBLIC_API_URL; ``` --- ## Common Pitfalls - Forgetting `"use client"` in files that use state, hooks, or browser APIs. - Wrong file names (`page.js`, `layout.js` are special names). - Trying to use `getStaticProps` or `getServerSideProps` (not used in App Router). - Forgetting to restart after changing `.env.local`. - Using `` tags instead of `` for navigation. --- ## Practice Assignments ### Assignment 1: Create a Portfolio - Make `app/page.js` as “Home”. - Make `app/about/page.js` with your bio. - Make `app/projects/page.js` with a list of projects. - Add navigation in `layout.js`. ### Assignment 2: Build a Simple Blog - Make `app/blog/page.js` with a list of 2–3 blog links. - Make `app/blog/[slug]/page.js` to show a blog post using `params.slug`. - Add links in `layout.js` for Home, About, and Blog. --- ## Conclusion The **App Router** in Next.js makes it easy to build apps with clear folder structure, reusable layouts, and simple pages. Start small: create pages, add navigation with `layout.js`, and organize your components. Once you’re comfortable, you can move on to data fetching and APIs.