Run a mock round

A way to customize the server-side behavior, e.g., with Express.

import { createServer } from "http";
import { parse } from "url";
import next from "next";

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(port);

  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? "development" : process.env.NODE_ENV
    }`
  );
});

In Next.js Pages Router, the Singleton Router refers to the global, shared router instance exported by next/router:

import Router from 'next/router';

// Navigating programmatically outside React component rendering:
Router.push('/dashboard');

### Router Events Lifecycle:
The singleton router allows you to listen to global route transition events across the entire application (useful for displaying top progress bars like NProgress):

Router.events.on('routeChangeStart', (url) => console.log(`Loading: ${url}`));
Router.events.on('routeChangeComplete', () => console.log('Navigation complete'));

### Modern App Router Equivalent:
In modern App Router (next/navigation), the global singleton object is replaced with component-scoped hooks: useRouter(), usePathname(), and useSearchParams().

By default, Next.js runs on port 3000 for both the development server (next dev) and production server (next start).

When you launch npm run dev, you can access the application at:
http://localhost:3000

### Automatic Port Fallback:
In modern versions of Next.js, if port 3000 is already occupied by another running application, Next.js will detect the conflict and automatically increment to port 3001 or prompt you to confirm switching to the next available port.

A function that runs at build time to fetch data for a page.

export async function getStaticProps(context) {
  const res = await fetch(`https://...`);
  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data }, // will be passed to the page component as props
  };
}

• Server Side Rendering (SSR): Next.js allows rendering React components on the server before sending them to the client, improving performance and SEO.
• Static Site Generation (SSG): It pre-renders pages at build time, useful for blogs or e-commerce sites.
• API Routes: You can build a backend using API routes in the same codebase without needing an external server.
• File Based Routing: Next.js automatically creates routes based on the file structure inside the pages directory.
• Client Side Rendering (CSR): Like React, Next.js also supports traditional client-side rendering.
• Incremental Side Rendering:
• Image Optimization: Built-in image optimization capabilities that reduce image sizes and enhance loading times.
• Automatic Code Splitting: Next.js splits the code into smaller bundles, which are loaded only when required, improving performance.
• TypeScript Support: Native support for TypeScript, enabling strict typing and better developer experience.
• Incremental Static Regeneration (ISR): Pages can be statically generated at runtime and updated incrementally.
• Fast Refresh: Provides an instant feedback loop while coding, similar to React's hot reloading.

Using useEffect and fetch or any other data fetching library like axios,fetch or swr by Next.js team.

import { useState, useEffect } from "react";

function Profile() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/profile")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No profile data</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

A hook that allows access to the router object and perform navigation. The useRouter hook allows you to programmatically change routes inside client components.

Middleware in middleware.ts at the project root runs before a request is completed, on the Edge runtime, and can rewrite, redirect, set headers or return a response directly. It is matched with a matcher config or conditional logic.

export function middleware(req: NextRequest) {
  if (!req.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}
export const config = { matcher: ['/dashboard/:path*'] };

Common uses are auth gating, A/B testing via rewrites, locale detection, bot filtering and security headers. Constraints: it runs on every matched request, so keep it fast and avoid large dependencies. It cannot use Node APIs or query a database directly on the Edge runtime, and it is not a substitute for authorising data access inside routes.

Because middleware runs before caching, rewrites can change which cached page is served. Use it for coarse redirects and header logic, not data fetching.

Use the Edge runtime for low-latency global responses and where Node APIs are not needed. Choose Node (default) when you require native Node modules, filesystem access, or heavy CPU tasks. You can set export const runtime = 'edge' or leave it for Node.