Next.js.

Next.js adds server rendering, a built-in router and backend code in the same project, which Create React App leaves to you. The React team has also deprecated Create React App for new apps. The main benefits are:

• Server-side rendering and static generation send finished HTML, which helps SEO.
• Routing is file-based, so a file or folder becomes a URL.
• API routes let you build backend endpoints in the same project.
• Next.js splits code automatically and produces optimized production builds with minimal configuration.
• The Image component resizes, compresses and lazy-loads images.
• Development includes hot reloading, TypeScript support and better error messages.

Create React App renders everything in the browser and has no built-in routing or data fetching.

Next.js uses file-based routing: it builds routes from your folder structure, so adding a page file creates a URL. In the Pages Router, every file in the pages directory becomes a route named after its path.

pages/
  index.js       → /
  about.js       → /about
  contact.js     → /contact
  blog/
    index.js     → /blog
    [slug].js    → /blog/:slug

Each file exports a React component as the default export, and that component becomes the page for the route. Files named index map to the root of their folder, and square brackets such as [slug] create a dynamic segment that matches any value.

The App Router uses folders instead of files. Each folder under app is a URL segment, and a page.js file inside it makes that segment publicly accessible. Other files can live next to the route without becoming URLs, and special files such as layout.js add UI shared by the routes below them.

The _app.js file holds the code that every page shares, because Next.js uses it to initialize every page. It is a custom App component that wraps all page components. You use it to:

• Keep state when navigating between pages
• Add global CSS
• Inject additional data into pages
• Handle global error boundaries
• Add common layout components

Next.js passes it the active page as Component and that page's props as pageProps. Whatever wraps Component, such as the header and footer below, appears on every page.

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <GlobalHeader />
      <Component {...pageProps} />
      <GlobalFooter />
    </div>
  );
}

export default MyApp;

_app.js belongs to the Pages Router. In the App Router, the root app/layout.js replaces both _app.js and _document.js.

You add global CSS by importing a stylesheet once at the root of the app. In the Pages Router, you can import global stylesheets only in pages/_app.js, so the styles apply to every page.

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

In the App Router, import the file in the root app/layout.js instead. The App Router lifts that restriction, so you can import global styles into any layout, page or component. Keep them for rules that apply everywhere, such as resets. Next.js does not remove a global stylesheet as you navigate between routes, so rules can conflict.

For styles that belong to one component, use CSS Modules instead. They generate unique class names, so the same class can appear in different files without clashing.

CSS Modules are CSS files whose class names are scoped locally to that file. You create one by giving the file a .module.css extension, and Next.js supports them with no setup.

/* Button.module.css */
.primary {
  background-color: blue;
  color: white;
}

// Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Importing the file gives you an object, and styles.primary holds a generated, unique class name. Two module files can both define .primary without a naming collision, because each one gets its own class in the build.

You can import a CSS Module into any component in both the App Router and the Pages Router. Use them for component-specific styles when Tailwind utilities are not enough.

The public directory holds static files that Next.js serves from the root URL. A file at public/logo.png is available at /logo.png, with no path prefix.

public/
  favicon.ico     → /favicon.ico
  logo.png        → /logo.png
  images/
    hero.jpg      → /images/hero.jpg

Use it for files that need a fixed URL, such as images, fonts or a site verification file. Next.js cannot safely cache files in public because they may change, so it serves them with Cache-Control: public, max-age=0.

A static file must not share its name with a page in pages, because that conflict is a build error. In the App Router, prefer the special metadata files inside app for robots.txt and the favicon.

You create a dynamic route by wrapping a file or folder name in square brackets. The file pages/posts/[id].js matches /posts/1, /posts/abc and any other single segment, and the matched value becomes a route parameter.

pages/
  posts/
    [id].js       → /posts/:id
    [...slug].js  → /posts/* (catch-all)

// pages/posts/[id].js
import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;
  
  return <h1>Post: {id}</h1>;
}

export default Post;

In the Pages Router you read the parameter from router.query. When the page is prerendered without server-side rendering, router.query starts as an empty object, so id is undefined until the router is ready. The [...slug].js form is a catch-all segment, which matches several segments and passes them as an array.

In the App Router, the brackets go on the folder name, as in app/posts/[id]/page.js. The page receives params as a promise, so a Server Component awaits it and a Client Component can use the useParams hook.

Link is a component for declarative navigation, while router.push() is a method for programmatic navigation from your code. Both perform a client-side transition without a full page reload.

Use Link for anything a user clicks to go somewhere. It extends the HTML <a> element, so it keeps normal link behavior such as opening in a new tab. It also prefetches the linked route in production when the link enters the viewport, so the route is already loaded when the user clicks.

Use router.push() when navigation is a side effect, such as after a form submits or a login succeeds. It does not prefetch on its own, so call router.prefetch() first if the next page is predictable.

import Link from 'next/link';
import { useRouter } from 'next/router';

function Navigation() {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/about');
  };
  
  return (
    <div>
      <Link href="/about">About Page</Link>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

This example imports useRouter from next/router, which belongs to the Pages Router. In the App Router, import useRouter from next/navigation inside a Client Component.

getStaticProps is a Pages Router function that fetches data at build time, so Next.js can prerender the page to static HTML. The props it returns go to the page component.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return {
    props: {
      posts,
    },
    revalidate: 3600, // ISR: revalidate every hour
  };
}

It runs only on the server, so it can query a database directly. The revalidate field turns on Incremental Static Regeneration, which rebuilds the page in the background, here at most once an hour.

Use it when content changes rarely and is the same for every user, for better performance and SEO. It cannot read the request, so request-time data needs getServerSideProps.

getServerSideProps is a Pages Router function that fetches data on every request at runtime and renders the page with it. The props it returns go to the page component.

export async function getServerSideProps(context) {
  const { req, res, params, query } = context;
  
  const data = await fetch(`https://api.example.com/user/${params.id}`);
  const user = await data.json();
  
  return {
    props: {
      user,
    },
  };
}

The context argument holds the request and response, the route params and the query string. On client-side navigation, Next.js calls the server to run it and gets the props back as JSON.

Use it when data changes frequently, requires authentication, or needs request-specific information. Every request waits for the server, so for data that can be cached, getStaticProps serves a prerendered page faster.

You fetch data on the client with standard React patterns, either a useEffect call or a data fetching library. The page renders first, then the browser requests the data and updates the UI.

import { useState, useEffect } from 'react';

function Profile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  
  return <div>Welcome, {user.name}!</div>;
}

This works, but you write loading and error handling yourself, and nothing caches or deduplicates the requests. A library such as SWR or React Query adds caching, revalidation and request deduplication, so it is the usual choice.

Client-side fetching suits data that is user-specific or changes often, and that search engines do not need to index. It is also the only option when the data depends on browser APIs. In the App Router this code must live in a Client Component marked with 'use client'. Prefer fetching in a Server Component when the data can be rendered on the server.

You create a Client Component by adding the 'use client' directive at the top of the file, above the imports. Components in the App Router are Server Components by default, so you opt in only where you need interactivity.

'use client';

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

The directive declares a boundary between server and client code. Every module the file imports, and every component it renders directly, joins the client bundle, so you do not repeat the directive in child files. Client Components are still prerendered to HTML on the server, then hydrated in the browser to attach event handlers.

Use one when you need state and event handlers, effects, or browser-only APIs such as localStorage. Keep the directive on small leaf components, such as a button, rather than a whole page, so less JavaScript reaches the browser.

You add a loading.js file to a route folder, and Next.js shows it instantly while that route's content loads. Next.js wraps page.js in a React Suspense boundary inside the layout, using your component as the fallback.

// app/posts/loading.js
export default function Loading() {
  return <div>Loading posts...</div>;
}

// app/posts/page.js
export default async function PostsPage() {
  // This delay will show the loading component
  await new Promise(resolve => setTimeout(resolve, 2000));
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return <PostsList posts={posts} />;
}

The page is an async Server Component, so the fallback stays on screen until its data resolves, then the real content streams in. The layout around it stays interactive, and navigation is interruptible. Next.js also prefetches the fallback, so a click shows it at once without waiting for the server.

loading.js covers the whole page. For finer control, wrap individual slow components in your own <Suspense> boundaries so the rest of the page renders sooner.

You create an API route by adding a file to pages/api in the Pages Router, or a route.js file under app in the App Router. Either way the file becomes an HTTP endpoint on the server, and its code never ships to the browser.

In the Pages Router, any file inside pages/api maps to /api/*. It default-exports one handler that receives Node.js req and res objects and branches on req.method.

// pages/api/users.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ users: [] });
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

In the App Router, a route.js file exports one function per HTTP method. Route Handlers use the Web Request and Response APIs, so you return a Response instead of writing to res.

// app/api/users/route.js
export async function GET() {
  return Response.json({ users: [] });
}

export async function POST(request) {
  const data = await request.json();
  // Process data
  return Response.json({ success: true });
}

A route.js file cannot sit in the same folder as a page.js, which is why APIs usually live under app/api. Both kinds are public endpoints, so validate input and check authorization in each one.