Next.js Interview Questions and Answers

A feature to create API endpoints in the pages/api or app/api directory. It allow you to create custom request handlers for a given route using the Web Request and Response APIs.

The public directory located at the root of a Next.js project serves static assets directly from the root domain path without going through Webpack or build bundling pipelines.

### Directory Structure Example:

my-next-app/
├── public/
│   ├── favicon.ico       --> Accessible at https://example.com/favicon.ico
│   ├── robots.txt        --> Accessible at https://example.com/robots.txt
│   ├── sitemap.xml       --> Accessible at https://example.com/sitemap.xml
│   └── images/
│       └── hero.webp     --> Accessible at https://example.com/images/hero.webp

### Usage in Code:
Refer to assets starting with a forward slash (/):

import Image from 'next/image';

export function HeroBanner() {
  return <Image src="/images/hero.webp" alt="Hero Banner" width={800} height={400} />;
}

### Important Security Rules:

• Never put secret files, private keys, or server code in public because every file inside is publicly downloadable.
• Assets in public should have static names; dynamic assets produced at runtime should be stored in S3/Cloud Storage or handled via API responses.

A feature to load components or modules dynamically.

const ComponentA = dynamic(() => import("../components/A"));
const ComponentB = dynamic(() => import("../components/B"));

Next.js has built-in support for environment variables managed through .env files with strict client/server boundary isolation:

### File Priority Hierarchy:

1. .env.development.local / .env.production.local (Local overrides, ignored by git)
2. .env.local (Always loaded, ignored by git)
3. .env.development / .env.production (Environment specific)
4. .env (Base defaults)

### Server vs Client Access Rules:

• Server-Only Variables (Default & Secure):

Any variable without a prefix is only accessible in Node.js server runtimes (Server Components, Route Handlers, getServerSideProps):

  DATABASE_URL=postgresql://user:secret@localhost:5432/db
  STRIPE_SECRET_KEY=sk_live_12345
  

Attempting to read process.env.STRIPE_SECRET_KEY in browser code returns undefined.

• Client-Exposed Variables (NEXT_PUBLIC_):

To expose a variable to browser JavaScript bundles, prefix it with NEXT_PUBLIC_:

  NEXT_PUBLIC_ANALYTICS_ID=UA-98765432-1
  NEXT_PUBLIC_API_URL=https://api.example.com
  

*Security Warning: Never prefix private database credentials or API secrets with NEXT_PUBLIC_.*

A configuration file to customize Next.js settings.

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

module.exports = nextConfig;

Using CSS modules with a .module.css file extension.

// styles.module.css
.example {
  color: red;
font-size:18px;
}

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

export default function Component() {
  return <div className={styles.example}>Hello World!</div>;
}

Rendering pages on each request. If a page uses Server-side Rendering, the page HTML is generated on each request.

export async function getServerSideProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  return { props: { repo } };
}

export default function Page({ repo }) {
  return <p>{repo.stargazers_count} Stars</p>;
}

Pre-rendering pages at build time. If a page uses Static Generation, the page HTML is generated at build time.

export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  return { props: { repo } };
}

export default function Page({ repo }) {
  return <p>{repo.stargazers_count} Stars</p>;
}

Both Static Site Generation (SSG) and Server-Side Rendering (SSR) are pre-rendering techniques in Next.js, but differ in when the HTML is rendered:

| Criterion | Static Site Generation (SSG) | Server-Side Rendering (SSR) |
| :--- | :--- | :--- |
| When Rendered | At build time (next build) or via ISR | On every incoming HTTP request |
| Response Latency | Extremely fast (served directly from CDN edge) | Slower (waits for server computation & DB queries) |
| Server Overhead | Zero origin server compute required per visit | Consumes server CPU/RAM on every user request |
| Dynamic Content | Best for content that changes infrequently (blogs, docs) | Best for personalized dashboards, live data feeds |
| Next.js Implementation | Server Components with cached fetch or getStaticProps | Server Components with cache: 'no-store' or getServerSideProps |

### Architectural Recommendation:
Use SSG / ISR whenever possible for maximum SEO performance, low server hosting costs, and instant page loads. Reserve SSR for pages requiring user authentication, dynamic cookies, or real-time query parameters.

Generating HTML for pages in advance, instead of on each request.

export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  return { props: { repo } };
}

export default function Page({ repo }) {
  return <p>{repo.stargazers_count} Stars</p>;
}

Incremental Static Regeneration is a technique in Next.js that allows you to update static pages at runtime without rebuilding the entire site.
This feature introduces a seamless way to serve both static and dynamic content by revalidating and regenerating pages in the background.

export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  return { props: { repo }, revalidate: 1 };
}

Vercel is the creator and maintainer of Next.js, providing an optimized zero-configuration deployment experience:

### Step-by-Step Deployment:

1. Push Code to Git:

Push your repository to GitHub, GitLab, or Bitbucket.

1. Connect to Vercel:

Log in to vercel.com and click "Add New Project".

1. Import Git Repository:

Select your repository from the list. Vercel automatically detects Next.js, configures the build command (next build), output directory (.next), and install command (npm install).

1. Configure Environment Variables:

Add production variables (database URLs, API tokens) under the Environment Variables tab.

1. Click Deploy:

Vercel compiles your application, deploys static assets to global edge networks, and provisions serverless and edge functions automatically.

### CLI Deployment:
You can also deploy directly from your local terminal using Vercel CLI:

npm install -g vercel
vercel

There are a few ways you can handle redirects in Next.js. One of them is by configuring redirects in next.config.js.

module.exports = {
  async redirects() {
    return [
      {
        source: "/about",
        destination: "/about-us",
        permanent: true,
      },
    ];
  },
};

A component for modifying the of a page.

import Head from "next/head";

<Head>
  <title>My page title</title>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>;

To manage the document head for meta tags, title,description, og etc.

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="description" content="My description" />
      </Head>
      <h1>Hello World!</h1>
    </div>
  );
}

Custom HTTP headers (such as CORS permissions, Cache-Control policies, or security headers like Content-Security-Policy and X-Frame-Options) can be configured in next.config.js:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        // Apply headers to all API routes
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' },
        ],
      },
      {
        // Apply strict security headers to all pages
        source: '/(.*)',
        headers: [
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};

Alternatively, in Next.js App Router, headers can be dynamically appended inside Middleware (middleware.ts).

Historically, next export was the CLI command used to export a Next.js application into pure static HTML/CSS/JS files that could be hosted on any static hosting provider (like GitHub Pages, Nginx, or an AWS S3 bucket).

### Modern Replacement (output: 'export'):
In modern Next.js versions (v13.3+), next export has been deprecated in favor of setting output: 'export' inside next.config.js:

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true, // Static hosts don't have Node.js image optimization
  },
};

Running npm run build with this configuration generates an out/ directory containing standalone HTML and static assets.

### Limitations of Static Export:
Features requiring an active Node.js server (such as dynamic getServerSideProps, Server Actions, API routes with runtime streaming, and incremental regeneration) are not supported in pure static exports.

Next.js includes the built-in next/font module, which automatically optimizes typography and removes external network requests for zero layout shift:

### Core Benefits:

1. Self-Hosting: Automatically downloads Google Fonts at build time and hosts them locally with your deployment assets. No requests are sent to Google by the user's browser (improving privacy and GDPR compliance).
2. Zero Layout Shift (CLS = 0): Injects size-adjust CSS fallbacks to match the proportions of fallback system fonts while custom fonts download.

### Implementation Example:

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

You can also use next/font/local to optimize custom .woff2 font files stored in your project.

By using the next/font package to optimize and load custom fonts.

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <main className={inter.className}>
      <h1>Hello World!</h1>
    </main>
  );
}

next-env.d.ts is an auto-generated TypeScript declaration file placed at the root of a Next.js project.

### What It Does:
It contains TypeScript reference directives ensuring that the TypeScript compiler recognizes Next.js specific ambient types:

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited

### Why You Should Never Edit It:
Next.js inspects and regenerates next-env.d.ts whenever you run next dev or next build. It informs TypeScript about:

• Next.js global types (e.g. process.env augmentations).
• Asset imports (allowing you to import logo from './logo.png' without type errors).
• CSS module typing (*.module.css).

Always commit this file to Git, but do not make manual edits to its contents.

next-compose-plugins was a popular community utility library used in older Next.js projects to cleanly chain and compose multiple configuration plugins in next.config.js without messy nested function wrapping:

### Example Legacy Syntax:

const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')();
const withPWA = require('next-pwa');

module.exports = withPlugins([
  [withBundleAnalyzer],
  [withPWA, { pwa: { dest: 'public' } }],
], {
  // Base Next.js configuration
  reactStrictMode: true,
});

### Modern Status:
In modern Next.js versions, next-compose-plugins is largely unmaintained and can conflict with modern async Next.js configurations. Modern practice is to wrap configurations directly or use standard function composition:

module.exports = withBundleAnalyzer(withPWA(nextConfig));

Next.js automatically provides polyfills for widely used modern ECMAScript features (such as Promise, fetch, Object.assign, Symbol, and URL) targeting browsers that have >0.5% global usage.

### Adding Custom Polyfills:
If your application must support rare or legacy browser APIs:

1. In App Router (app/layout.tsx):

Import the required polyfill at the very top of your root layout or a client component:

   // app/layout.tsx
   import 'core-js/features/array/at';
   import 'resize-observer-polyfill';
   

1. In Pages Router (pages/_app.js):

Import the polyfill at the top of _app.js before any other application code runs.

1. Conditional Polyfill Script:

Use next/script with strategy="beforeInteractive" to load external polyfills (such as Polyfill.io or self-hosted bundles) before React hydrates.

Automatic Static Optimization is a core Next.js feature where the build system automatically analyzes each page to determine whether it can be pre-rendered as pure static HTML:

### How It Works:

• If a page has no dynamic server data requirements (e.g. does not use getServerSideProps, cache: 'no-store', cookies(), or headers()), Next.js automatically outputs it as a static HTML file during next build.
• In the build terminal output, statically optimized pages are flagged with an empty circle ○ (Static) or ● (SSG).

### Benefits:

• Instant TTFB: Static pages are cached and served directly from CDN edge caches.
• Zero Compute Cost: No server compute is triggered when visitors access static pages.
• Progressive Hydration: The static HTML renders immediately in the browser, and React attaches event listeners asynchronously.

By configuring i18n settings in next.config.js.

module.exports = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
  },
};

A development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features.

module.exports = {
  reactStrictMode: true,
};

Note: Since Next.js 13.5.1, Strict Mode is true by default with app router, so the above configuration is only necessary for pages. You can still disable Strict Mode by setting reactStrictMode: false.

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().

The next/script component is used to load external scripts in a Next.js application. It provides features like loading scripts asynchronously, deferring execution, and controlling script loading behavior.

import Script from "next/script";

export default function Page() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="lazyOnload" />
      <h1>Hello World!</h1>
    </>
  );
}

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
    }`
  );
});

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>
  );
}

By installing Apollo Client or any other GraphQL client and configuring it in the \_app.js file.

npm install @apollo/client graphql
yarn add @apollo/client graphql

Then, set up Apollo Client in your \_app.js:

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://your-graphql-endpoint.com/graphql",
  cache: new InMemoryCache(),
});

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

export default MyApp;

next-seo is a plugin for managing SEO metadata in Next.js applications, making it easier to set and manage meta tags, Open Graph tags, and other SEO-related elements.

import { DefaultSeo } from "next-seo";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        title="My Next.js App"
        description="A description of my Next.js app"
        openGraph={{
          type: "website",
          locale: "en_IE",
          url: "https://www.example.com/",
          site_name: "My Next.js App",
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Next.js handles routing through a combination of file-system conventions and client-side navigation components:

### 1. Declarative Navigation (<Link>):
Always use next/link for internal transitions to enable automatic prefetching and prevent full page reloads:

import Link from 'next/link';

<Link href="/about" prefetch={true} className="nav-link">
  About Us
</Link>

### 2. Programmatic Navigation:
Use the useRouter hook from next/navigation:

'use client';
import { useRouter } from 'next/navigation';

export function LoginButton() {
  const router = useRouter();
  
  const handleLogin = async () => {
    await authService.login();
    router.push('/dashboard');
    router.refresh(); // Refreshes server components
  };

  return <button onClick={handleLogin}>Log In</button>;
}

### 3. Reading Route Parameters:

• useParams(): Access dynamic URL parameters (e.g. id).
• useSearchParams(): Read query strings (?category=tech).

By creating a next-i18next.config.js file and initializing it in the app.

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr"],
  },
};

Then, initialize it in your app:

import { appWithTranslation } from "next-i18next";
import nextI18NextConfig from "../next-i18next.config";

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

export default appWithTranslation(MyApp, nextI18NextConfig);

It disables server-side rendering for a dynamically imported component, ensuring it only loads on the client side.

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("../components/hello"), {
  ssr: false,
});

function Home() {
  return (
    <section>
      <Header />
      <DynamicComponent />
      <Footer />
    </section>
  );
}

export default Home;

By using the next/script component to load the Google Analytics script.

import Script from "next/script";

export default function MyApp() {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'YOUR_TRACKING_ID');
        `}
      </Script>
    </>
  );
}

Using the Head component from next/head.

import Head from "next/head";

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta
          name="viewport"
          content="initial-scale=1.0, width=device-width"
        />
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

export default IndexPage;

To add a sitemap in Next.js app router, you can use the next-sitemap package. First, install it:

npm install next-sitemap

Then, create a next-sitemap.config.js file in the root of your project and configure your sitemap options.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || "https://example.com",
  generateRobotsTxt: true, // (optional)
  changefreq: "daily", // (optional)
  priority: 0.7, // (optional)
  sitemapSize: 7000, // (optional)
  exclude: ["/404", "/500"], // (optional)
  robotsTxtOptions: {
    policies: [
      { userAgent: "*", allow: "/" },
      { userAgent: "Googlebot", disallow: "/private" },
    ],
  },
};

Finally, run the following command to generate the sitemap:

npx next-sitemap

This will create a sitemap.xml file in the public directory of your Next.js app.

By setting appropriate headers in the API route response.

export default function handler(req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.status(200).json({ message: "CORS enabled" });
}

By using the cookie package or next-cookies to read and write cookies in API routes or server-side functions.

import Cookies from "cookies";

export default function handler(req, res) {
  const cookies = new Cookies(req, res);
  cookies.set("token", "value", { httpOnly: true });
  res.status(200).json({ message: "Cookie set" });
}

For dynamic importing of components with support for SSR.

import dynamic from "next/dynamic";

// Client-side only component
const DynamicComponentWithNoSSR = dynamic(
  () => import("../components/hello"),
  {
    ssr: false,
  }
);

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <Footer />
    </div>
  );
}

export default Home;

To consider security in Next.js app router, you can follow these best practices:

• Use HTTPS for all requests to ensure data is encrypted in transit.
• Implement authentication and authorization to protect sensitive routes.
• Sanitize user input to prevent XSS attacks.
• Use environment variables to store sensitive information like API keys.
• Regularly update dependencies to patch known vulnerabilities.
• Implement Content Security Policy (CSP) headers to mitigate XSS attacks.
• Use secure cookies with the HttpOnly and Secure flags.

useTranslation is a custom hook provided by the next-i18next and react-i18next libraries for implementing internationalization (i18n) and multi-language translations in Next.js applications:

### How It Works:

1. Translation strings are stored in JSON files per locale:

   public/locales/
   ├── en/common.json  --> { "welcome": "Welcome back, {{name}}!" }
   └── es/common.json  --> { "welcome": "¡Bienvenido de nuevo, {{name}}!" }
   

1. Using the hook inside a component:

   import { useTranslation } from 'next-i18next';

   export function Header({ userName }: { userName: string }) {
     const { t } = useTranslation('common');
     return <h1>{t('welcome', { name: userName })}</h1>;
   }
   

### In Modern App Router:
Modern Next.js 13+ App Router natively supports localized sub-path routing (e.g. app/[lang]/page.tsx) with dictionary loaders (getDictionary(lang)), reducing dependency on heavy client-side i18n libraries.

AMP (Accelerated Mobile Pages) is an open-source HTML framework created by Google to build ultra-fast, lightweight web pages for mobile devices by strictly constraining JavaScript and external styling.

### AMP in Next.js:
Next.js provided built-in support for generating both AMP-first pages and hybrid AMP pages (serving AMP to mobile search bots and full React to desktop users).

### Modern Industry Context:
AMP support in Next.js is now largely considered legacy. Google Search no longer requires AMP for Top Stories placement, prioritizing Core Web Vitals (LCP, FID/INP, CLS) instead. Modern Next.js applications achieve superior performance without AMP limitations using Server Components, streaming, and edge caching.

In the Next.js Pages Router, AMP was enabled on a per-page basis by exporting an amp configuration object:

### 1. Hybrid AMP Page:

// pages/article.js
export const config = { amp: 'hybrid' };

import { useAmp } from 'next/amp';

export default function ArticlePage() {
  const isAmp = useAmp();
  return (
    <div>
      <h1>{isAmp ? 'Fast AMP Version' : 'Full Interactive Version'}</h1>
    </div>
  );
}

### 2. AMP-Only Page:

// pages/about.js
export const config = { amp: true };

export default function About() {
  return <h1>Pure AMP Page</h1>;
}

*Note: AMP is not supported in the modern App Router (app/ directory).*

In professional Next.js architecture, separating pages (or app) from components is fundamental to project organization:

| Aspect | pages/ (or app/) | components/ |
| :--- | :--- | :--- |
| Routing | Maps directly to public URLs | Never generates routes |
| Purpose | Defines route endpoints, page layouts, metadata | Houses reusable UI building blocks |
| Structure | Bound to URL hierarchy | Organized by feature (Button, Card, Navbar) |
| Data Fetching | Top-level entry point for route data fetching | Receives data via props or local hooks |

### Clean Architecture Example:

src/
├── app/
│   ├── page.tsx               --> Home page route (/)
│   └── questions/
│       └── page.tsx           --> Questions route (/questions)
└── components/
    ├── ui/
    │   ├── Button.tsx         --> Reusable button
    │   └── Modal.tsx          --> Reusable modal
    └── questions/
        └── QuestionCard.tsx   --> Question display component

By placing them in the public directory, which is served at the root URL.

public/
├── images/
│   └── logo.png
└── favicon.ico

You can access these files using /images/logo.png or /favicon.ico.

• Use static generation (SSG) for pages that can be pre-rendered.
• Implement incremental static regeneration (ISR) for dynamic content.
• Use the next/image component for optimized images.
• Enable code splitting and tree shaking.
• Use dynamic imports for large components.
• Optimize CSS with CSS modules or styled-components.
• Leverage caching strategies for API routes.

• Use HTTPS for secure communication.
• Implement authentication and authorization.
• Sanitize user input to prevent XSS attacks.
• Use environment variables for sensitive data.
• Regularly update dependencies to patch vulnerabilities.
• Implement Content Security Policy (CSP) headers.
• Use secure cookies with HttpOnly and Secure flags.

• Limited support for non-React libraries.
• Requires a Node.js server for server-side rendering.
• Some features may not be compatible with static site generation.
• Learning curve for developers new to React or Next.js.

Yes, Next.js is suitable for large-scale applications due to its features like server-side rendering, static site generation, and API routes. It also supports code splitting, dynamic imports, and incremental static regeneration, which help in managing large codebases efficiently.

Next.js is considered a full-stack framework because it allows developers to build both the frontend and backend of web applications within a single codebase. It provides features like server-side rendering, static site generation, API routes, and database integration, enabling the development of complete web applications without needing separate frameworks for the frontend and backend.

To prevent API routes from being accessed by the client, you can implement authentication and authorization checks in your API route handlers. This ensures that only authenticated users can access the API endpoints.

export default function handler(req, res) {
  const token = req.headers.authorization;

  if (!token || !isValidToken(token)) {
    return res.status(401).json({ error: "Unauthorized" });
  }

  // Handle the request
  res.status(200).json({ message: "Success" });
}

JSON Web Tokens (JWT) can be used in Next.js for authentication and authorization. You can create a JWT token upon user login and store it in a cookie or local storage. Then, you can verify the token in API routes or server-side functions to authenticate users.

import jwt from "jsonwebtoken";

// Create a JWT token
const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {
  expiresIn: "1h",
});

// Verify the JWT token
jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
  if (err) {
    return res.status(401).json({ error: "Invalid token" });
  }
  // Proceed with authenticated user
});

By creating a globals.css file in the app directory and importing it in the _app.js file.

/* app/globals.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

Then import it in your _app.js:

// app/_app.js
import "../globals.css";

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

In the App Router you can control revalidation when fetching data by passing the next option to fetch. For example, to revalidate every 10 seconds:

const res = await fetch("https://api.example.com/data", {
  next: { revalidate: 10 },
});
const data = await res.json();

Only expose non-sensitive variables by prefixing them with NEXT_PUBLIC_. Keep secrets (API keys, DB credentials) server-only in .env and access them from server-side code or API routes.

NEXT_PUBLIC_API_BASE=https://api.example.com
SECRET_API_KEY=supersecret

The Pages Router is a file-based routing system in Next.js that automatically creates routes based on the file structure inside the pages directory.

A catch-all segment allows you to match multiple segments in a dynamic route. It is defined using [[...param]] syntax.

This allows you to create routes that can match multiple segments, such as /docs/nextjs, /docs/react, etc.

// pages/docs/[[...slug]].js
export default function Docs({ params }) {
  return <div>Docs: {params.slug.join("/")}</div>;
}

In the Next.js Pages Router, pages/_app.js (or _app.tsx) is the top-level root component that wraps every single page in the application during rendering:

### Key Responsibilities of _app.js:

1. Persisting Layouts & Navigation: Keeps persistent navigation headers, footers, and sidebars from re-rendering across page changes.
2. Global CSS Imports: The only file in Pages Router permitted to import global stylesheets (import '../styles/globals.css').
3. Global State & Context Providers: Wrapping the app with ThemeProvider, Redux Provider, React Query ClientProvider, or AuthProvider.
4. Custom Error Handling & Analytics: Tracking route change pageviews with Google Analytics.

### Example Implementation:

// pages/_app.tsx
import type { AppProps } from 'next/app';
import '../styles/globals.css';
import { AuthProvider } from '@/context/AuthContext';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

In the Next.js Pages Router, pages/_document.js (or _document.tsx) allows developers to augment the server-rendered HTML document skeleton (<html>, <head>, <body>).

### Key Characteristics:

• Renders only on the server during the initial HTML generation; it is never executed on the client side.
• Event handlers (such as onClick) do not work inside _document.js.

### Typical Use Cases:

1. Custom HTML lang attributes: <Html lang="en">
2. Custom font link tags and favicons
3. Third-party tracking scripts injected into <Head>
4. CSS-in-JS SSR styling injections (such as Styled Components or Emotion style collection)

### Standard Template:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className="bg-gray-50 antialiased">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

While both are root-level files in the Next.js Pages Router, they operate at fundamentally different layers:

| Dimension | _app.js | _document.js |
| :--- | :--- | :--- |
| Execution | Runs on both Server and Client | Runs only on Server |
| Scope | Wraps React component page hierarchy | Wraps initial HTML shell (<html>, <body>) |
| Interactivity | Supports React hooks, state, event listeners | Zero client interactivity (no hooks, no event handlers) |
| CSS | Can import global CSS files | Cannot import stylesheets directly |
| Purpose | Shared layouts, context providers, state | Document metadata, language tag, custom scripts |

### Modern App Router Note:
In the modern App Router (app/ directory), both files are replaced by a single, unified app/layout.tsx root layout file.

In the Next.js Pages Router, pages/_error.js (or _error.tsx) is a fallback error page rendered whenever an unhandled HTTP exception (such as a 500 internal server error or unhandled runtime rejection) occurs:

### Key Functionality:

• Captures status codes from server responses (res.statusCode) or client errors (err.statusCode).
• Overrides Next.js's default error page with custom branded styling.

### Example Implementation:

// pages/_error.tsx
import { NextPageContext } from 'next';

function Error({ statusCode }: { statusCode?: number }) {
  return (
    <div className="error-container">
      <h1>{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}</h1>
    </div>
  );
}

Error.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

Using getStaticProps or getServerSideProps in server side.

// getStaticProps
export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  return { props: { repo } };
}

export default function Page({ repo }) {
  return repo.stargazers_count;
}
jsx
// getServerSideProps
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();
  // Pass data to the page via props
  return { props: { repo } };
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  );
}

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
  };
}

A function that runs on each request to fetch data for a page.

export async function getServerSideProps(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
  };
}

In the Next.js Pages Router, getStaticProps and getServerSideProps dictate data fetching and page caching behavior:

### 1. getStaticProps (Static Site Generation):

• Executes only at build time on the server (or incrementally via ISR revalidate).
• Produces static HTML and JSON files deployed to CDN edge caches.
• When to use: Content that is identical for all users (e.g. blog posts, documentation, marketing landing pages, technical interview guides).

export async function getStaticProps() {
  const data = await fetchQuestions();
  return { props: { data }, revalidate: 3600 }; // ISR every 1 hour
}

### 2. getServerSideProps (Server-Side Rendering):

• Executes on the server on every incoming HTTP request.
• Has access to the incoming request object (req), cookies, and query strings.
• When to use: Pages displaying sensitive user-specific data, real-time live feeds, or requiring authentication session validation before rendering.

export async function getServerSideProps(context) {
  const session = await getSession(context.req);
  if (!session) return { redirect: { destination: '/login' } };
  return { props: { user: session.user } };
}

A function that specifies dynamic routes to pre-render based on data.

export async function getStaticPaths() {
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

Determines how to handle missing paths, with true, false, or 'blocking'.

export async function getStaticPaths() {
  const paths = await getAllPostIds();
  return {
    paths,
    fallback: true, // this will enable fallback for all paths which are not generated at build time
  };
}
jsx
export async function getStaticPaths() {
  const paths = await getAllPostIds();
  return {
    paths,
    fallback: false, // this will return 404 for all paths which are not generated at build time
  };
}
jsx
export async function getStaticPaths() {
  const paths = await getAllPostIds();
  return {
    paths,
    fallback: "blocking", // this will return a static page for all paths which are not generated at build time
  };
}

By creating files in the pages/api directory, which will be treated as API endpoints.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: "John Doe" });
}

You can access this API route at /api/hello.

By creating a _error.js file in the pages directory.

// pages/_error.js
export default function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}

Yes, the Pages Router has some limitations compared to the App Router, such as:

• Limited support for nested routes and layouts.
• Less flexibility in handling server components.
• No support for React Server Components.

By using libraries like next-auth or implementing custom authentication logic in API routes.

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // Add more configuration options as needed
});

By using client-side form handling or API routes for server-side handling.

// pages/contact.js
export default function Contact() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const response = await fetch("/api/contact", {
      method: "POST",
      body: formData,
    });
    if (response.ok) {
      alert("Form submitted successfully!");
    } else {
      alert("Error submitting form.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button type="submit">Submit</button>
    </form>
  );
}

Yes, you can use features like static generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR) to optimize performance in the Pages Router.

• Static Generation (SSG): Pre-render pages at build time.
• Server-Side Rendering (SSR): Render pages on each request.
• Incremental Static Regeneration (ISR): Update static pages after the build.

By using the next-i18next library or the built-in internationalization features in Next.js.

// next.config.js
module.exports = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
  },
};

Then, you can use the useTranslation hook from next-i18next to handle translations in your components.

import { useTranslation } from "next-i18next";

export default function Home() {
  const { t } = useTranslation("common");
  return <h1>{t("welcome")}</h1>;
}

By using the next/head component to manage meta tags and other SEO-related elements.

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta
          name="description"
          content="A description of my Next.js app"
        />
      </Head>
      <h1>Welcome to My Next.js App</h1>
    </>
  );
}

By placing static assets in the public directory, which is served at the root URL.

public/
├── images/
│   └── logo.png
└── favicon.ico

You can access these files using /images/logo.png or /favicon.ico.

Next.js uses a built-in caching mechanism for static assets and API routes. You can also implement custom caching strategies using HTTP headers or libraries like next-cache.

• Static Assets: Cached by default with a long cache lifetime.
• API Routes: Can be cached using HTTP headers like Cache-Control.

export default function handler(req, res) {
  res.setHeader("Cache-Control", "public, max-age=3600, immutable");
  res.status(200).json({ message: "Cached response" });
}

Cache revalidation can be handled using the revalidate option in getStaticProps or by setting appropriate HTTP headers in API routes.

• Using revalidate: Automatically revalidates static pages after a specified time.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data },
    revalidate: 10, // Revalidate every 10 seconds
  };
}

• Using HTTP Headers: Set cache control headers in API routes.

export default function handler(req, res) {
  res.setHeader("Cache-Control", "s-maxage=10, stale-while-revalidate");
  res.status(200).json({ message: "Revalidated response" });
}

By using the next/image component, which automatically optimizes images for performance.

import Image from "next/image";

export default function Home() {
  return (
    <div>
      <h1>My Next.js App</h1>
      <Image
        src="/images/logo.png"
        alt="Logo"
        width={500}
        height={300}
        quality={75}
      />
    </div>
  );
}

The next/image component provides features like lazy loading, responsive images, and automatic format selection.

You might choose the Pages Router over the App Router in the following scenarios:

• When you need a simple file-based routing system without complex nested routes.
• When you prefer the traditional Next.js routing approach.
• When your application does not require advanced features like server components or layouts.

The Pages Router is suitable for smaller applications or when you want to leverage existing knowledge of Next.js routing.

You might choose the App Router over the Pages Router in the following scenarios:

• When you need advanced routing capabilities, such as nested routes and layouts.
• When you want to leverage React Server Components for better performance and flexibility.
• When your application requires more complex data fetching strategies.

The App Router is suitable for larger applications or when you want to take advantage of the latest features in Next.js 13.

The App Router is a new routing system introduced in Next.js 13 that allows for more flexible and powerful routing capabilities, including nested routes, layouts, and server components.

Form handling in Next.js has evolved into two primary architectures:

### 1. Modern Approach: Server Actions (App Router - Recommended):
Server Actions allow forms to execute server-side database mutations directly without manually configuring API routes:

// app/contact/page.tsx
export default function ContactForm() {
  async function handleSubmit(formData: FormData) {
    'use server';
    const email = formData.get('email');
    const message = formData.get('message');
    await db.inquiry.create({ data: { email, message } });
  }

  return (
    <form action={handleSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send Message</button>
    </form>
  );
}

### 2. Traditional Approach: Client Fetch to Route Handlers:
Manage local input state with useState or React Hook Form, submitting via fetch to /api/contact:

'use client';
const onSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(formData),
    headers: { 'Content-Type': 'application/json' },
  });
};

Authentication in Next.js applications is typically implemented using one of three industry-standard architectural patterns:

### 1. NextAuth.js / Auth.js (Industry Standard):
The most popular open-source authentication library specifically built for Next.js.

• Supports OAuth providers (Google, GitHub, Apple), credentials (email/password), and passwordless magic links.
• Handles encrypted JWT sessions and HTTP-only cookies automatically:

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';

const handler = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
});
export { handler as GET, handler as POST };

### 2. Managed Identity Providers (Clerk / Supabase / Auth0):
Drop-in SDKs providing pre-built user management components (<SignIn />, <UserButton />) and session tokens verified in Next.js Middleware.

### 3. Custom JWT & HTTP-Only Cookies:
Issue signed JWT tokens upon login, stored strictly in secure HTTP-only cookies (SameSite=Lax; HttpOnly; Secure) to defend against Cross-Site Scripting (XSS) attacks. Verify token validity within middleware.ts on protected route segments.

To add authjs in nextjs app router, you can use the next-auth package. First, install it:

npm install next-auth

Then, create a file named [...nextauth].js in the app/api/auth directory and configure your authentication providers.

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // Add more configuration options as needed
  callbacks: {
    async session(session, user) {
      // Add custom session properties here
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
    error: "/auth/error", // Error page
  },
  secret: process.env.NEXTAUTH_SECRET, // Required for JWT encryption
  session: {
    jwt: true, // Use JWT for session management
  },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET, // Required for JWT encryption
  },
  events: {
    signIn: async (message) => {
      // Custom logic after sign-in
      console.log("User signed in:", message);
    },
  },
  debug: process.env.NODE_ENV === "development", // Enable debug mode in development
  theme: {
    colorScheme: "light", // Change to "dark" for dark mode
    brandColor: "#0000FF", // Custom brand color
    logo: "/logo.png", // Custom logo URL
  },
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
    signOut: "/auth/signout", // Custom sign-out page
    error: "/auth/error", // Error page
    verifyRequest: "/auth/verify-request", // Verification request page
    newUser: null, // Will disable the new account creation screen
  },
});

By using cookies or local storage to store authentication tokens.

// Example of setting a token in a cookie
import Cookies from "js-cookie";

function setToken(token) {
  Cookies.set("authToken", token, { expires: 7 }); // Expires in 7 days
}

function getToken() {
  return Cookies.get("authToken");
}

To add credentials in Next.js app router, you can use the next-auth package with the Credentials provider. First, install it:

npm install next-auth

Then, create a file named [...nextauth].js in the app/api/auth directory and configure your credentials provider.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        // Add your own logic to validate credentials here
        const user = { id: 1, name: "John Doe" }; // Example user

        if (
          credentials.username === "admin" &&
          credentials.password === "password"
        ) {
          return user; // Return user object if credentials are valid
        } else {
          return null; // Return null if credentials are invalid
        }
      },
    }),
  ],
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
  },
  callbacks: {
    async session(session, user) {
      session.user = user; // Add user object to session
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET, // Required for JWT encryption
  session: {
    jwt: true, // Use JWT for session management
  },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET, // Required for JWT encryption
  },
});

The use server directive is used to indicate that a function should be executed on the server side. It allows you to write server-side logic in a component or function that can be called from the client side.

"use server";

export async function myServerFunction() {
  // Server-side logic here
  return "Hello from the server!";
}

Using use server: The function is executed on the server side, allowing access to server-side resources and APIs. It can be used to perform operations that require server-side logic, such as database queries or API calls.

Not using use server: The function is executed on the client side, meaning it cannot access server-side resources directly. It can only perform operations that are available in the client environment, such as manipulating the DOM or making client-side API calls.

• Example with use server:

  "use server";
  export async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  }
  

• Example without use server:

  export async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  }
  

• Example with use server In Component:

    import { fetchData } from "./path/to/your/file";

    export default function MyComponent() {
      const data = await fetchData(); // This will run on the server side
      return <div>{data}</div>;
    }
  

• Example without use server In Component:

  import { fetchData } from "./path/to/your/file";
  export default function MyComponent() {
    const data = fetchData(); // This will run on the client side
    return <div>{data}</div>;
  }
  

By creating files in the app/api directory, where each file corresponds to an API endpoint.

// app/api/hello/route.js
export async function GET(request) {
  return new Response("Hello, World!");
}

The formAction is a special attribute used in Next.js to define the action URL for a form submission. It allows you to specify a server-side function that will handle the form submission.

// app/form-example/page.js
"use server";

export async function handleSubmit(formData) {
  const name = formData.get("name");
  console.log("Form submitted with name:", name);
  return { success: true };
}

export default function FormExample() {
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, when the form is submitted, the handleSubmit function will be called on the server side with the form data.

By using the formData API in a server action to handle file uploads.

// app/upload/page.js
"use server";

export async function handleUpload(formData) {
  const file = formData.get("file");
  // Process the file (e.g., save it to a storage service)
  console.log("File uploaded:", file.name);
  return { success: true };
}

export default function UploadPage() {
  return (
    <form action={handleUpload} encType="multipart/form-data">
      <input type="file" name="file" />
      <button type="submit">Upload</button>
    </form>
  );
}

• Creating nested routes with layouts.
• Implementing server-side rendering for dynamic content.
• Handling API routes for backend functionality.
• Managing authentication and authorization flows.
• Building complex applications with shared layouts and components.

The App Router allows for nested routes, layouts, and server components, while the Pages Router uses a flat file structure for routing and does not support nested routes or layouts.

The use client directive is used to indicate that a component should be rendered on the client side. It allows you to write client-side logic in a component that can be executed in the browser.

"use client";

export default function ClientComponent() {
  return <div>This component is rendered on the client side.</div>;
}

Yes, it is possible to use both App Router and Pages Router in the same Next.js project. You can have the app directory for the App Router and the pages directory for the Pages Router, allowing you to take advantage of both routing systems.

Yes, some limitations of the App Router include:

• It is only available in Next.js 13 and later versions.
• It may not support all features available in the Pages Router.
• Some third-party libraries may not be compatible with the App Router.
• Many features from the Pages Router, such as getStaticProps and getServerSideProps, are not available in the App Router.
• The App Router is still evolving, and some features may change or be added in future releases.

• use server: Indicates that the function should be executed on the server side. It allows you to write server-side logic that can be called from the client side.

• use client: Indicates that the component should be rendered on the client side. It allows you to write client-side logic that can be executed in the browser.

// Example of use server
"use server";

export async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

// Example of use client
("use client");

export default function ClientComponent() {
  return <div>This component is rendered on the client side.</div>;
}

Server actions in Next.js allow you to define functions that can be executed on the server side when a form is submitted or an action is triggered. These functions can handle data processing, database interactions, or any server-side logic.

// app/actions/submitForm.js
"use server";

export async function submitForm(formData) {
  const name = formData.get("name");
  console.log("Form submitted with name:", name);
  return { success: true };
}

You can then use this action in a form:

// app/form/page.js
import { submitForm } from "../actions/submitForm";

export default function FormPage() {
  return (
    <form action={submitForm}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

• Performance: Server actions allow you to offload heavy computations or data processing to the server, reducing the load on the client.
• Security: Sensitive operations can be performed on the server, preventing exposure of sensitive data or logic to the client.
• Simplified Data Fetching: You can fetch data directly in server actions without needing to manage client-side state or effects.
• Reduced Client Bundle Size: By moving logic to the server, you can reduce the amount of JavaScript sent to the client, improving load times.

• Latency: Server actions can introduce latency since they require a round trip to the server, which may not be ideal for real-time interactions.
• Complexity: Managing server actions can add complexity to your application, especially if you have many actions or need to handle different states.
• Limited Client-Side Interactivity: Since server actions are executed on the server, they may not provide the same level of interactivity as client-side functions.
• Debugging Challenges: Debugging server actions can be more challenging compared to client-side code, as you may not have access to browser developer tools.

• API Routes: You can create API routes to handle server-side logic and data fetching, which can be called from the client side.
• Client-Side Fetching: Use client-side data fetching methods like useEffect or libraries like SWR or React Query to manage data on the client side.
• Static Site Generation (SSG): Use SSG for pages that can be pre-rendered at build time, reducing the need for server actions.
• Server-Side Rendering (SSR): Use SSR for dynamic pages that require server-side data fetching on each request.

Instead of using server actions, you can use API routes to handle form submissions or data processing. Here's an example:

// app/api/submitForm/route.js
export async function POST(request) {
  const formData = await request.formData();
  const name = formData.get("name");
  console.log("Form submitted with name:", name);
  return new Response(JSON.stringify({ success: true }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

You can then call this API route from a client-side component:

// app/form/page.js
export default function FormPage() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const response = await fetch("/api/submitForm", {
      method: "POST",
      body: formData,
    });
    const result = await response.json();
    console.log(result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

JSON Web Tokens (JWT) can be used in the Next.js App Router for authentication and authorization. You can create a JWT token upon user login and store it in a cookie or local storage. Then, you can verify the token in API routes or server-side functions to authenticate users.

import jwt from "jsonwebtoken";

// Create a JWT token
const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {
  expiresIn: "1h",
});

// Verify the JWT token
jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
  if (err) {
    return res.status(401).json({ error: "Invalid token" });
  }
  // Proceed with authenticated user
});

Using it on application:

// app/api/auth/route.js
import { NextResponse } from "next/server";
import jwt from "jsonwebtoken";
export async function POST(request) {
  const { token } = await request.json();
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    return NextResponse.json({ userId: decoded.userId });
  } catch (error) {
    return NextResponse.json({ error: "Invalid token" }, { status: 401 });
  }
}

You can also use JWT tokens for protecting API routes:

// app/api/protected/route.js
import { NextResponse } from "next/server";
import jwt from "jsonwebtoken";
export async function GET(request) {
  const token = request.cookies.get("authToken");

  if (!token) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    // Handle the request for authorized users
    return NextResponse.json({
      message: "Protected data",
      userId: decoded.userId,
    });
  } catch (error) {
    return NextResponse.json({ error: "Invalid token" }, { status: 401 });
  }
}

The context of using JWT tokens in the Next.js App Router is primarily for authentication and authorization purposes. JWT tokens allow you to securely transmit user information between the client and server, enabling you to verify user identity and permissions without needing to store session data on the server.

This approach is particularly useful for stateless applications where you want to maintain user sessions without relying on server-side session storage.

The App Router offers more flexibility and features compared to the Pages Router, such as nested routes, layouts, and server components. It is designed for building complex applications with shared layouts and components.

However, the choice between App Router and Pages Router depends on your specific use case. If you need simple routing without nested routes or layouts, the Pages Router may be sufficient.

You can handle global state management in Next.js with the App Router using libraries like Redux, Zustand, or React Context API. These libraries allow you to create a global store that can be accessed from any component in your application.

• Using React Context API:

// app/context/GlobalState.js
import { createContext, useContext, useState } from "react";

const GlobalStateContext = createContext();

export function GlobalStateProvider({ children }) {
  const [state, setState] = useState({ user: null });

  return (
    <GlobalStateContext.Provider value={{ state, setState }}>
      {children}
    </GlobalStateContext.Provider>
  );
}

export function useGlobalState() {
  return useContext(GlobalStateContext);
}

Then wrap your application with the GlobalStateProvider:

// app/layout.js
import { GlobalStateProvider } from "./context/GlobalState";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GlobalStateProvider>{children}</GlobalStateProvider>
      </body>
    </html>
  );
}

Now you can access the global state in any component using the useGlobalState hook.

// app/page.js
import { useGlobalState } from "./context/GlobalState";

export default function HomePage() {
  const { state, setState } = useGlobalState();

  return (
    <div>
      <h1>Welcome, {state.user ? state.user.name : "Guest"}</h1>
      <button onClick={() => setState({ user: { name: "John Doe" } })}>
        Log In
      </button>
    </div>
  );
}

In the Next.js App Router, you can use the fetch API to make HTTP requests to external APIs or your own API routes. The fetch function is available globally in both server and client components.

• Example of using fetch in a server component:

// app/api/data/route.js
export async function GET() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
}

• Example of using fetch in a client component:

// app/page.js
import { useEffect, useState } from "react";

export default function HomePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("/api/data");
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Route groups allow you to organize routes without affecting the URL structure. You create them by wrapping folder names in parentheses ().

app/
├── (marketing)/
│   ├── about/
│   │   └── page.js     // /about
│   └── contact/
│       └── page.js     // /contact
├── (shop)/
│   ├── products/
│   │   └── page.js     // /products
│   └── cart/
│       └── page.js     // /cart
└── layout.js           // Shared layout

Route groups are useful for organizing code, creating different layouts for different sections, or conditionally including layouts.

The loading.js file creates loading UI that shows instantly while route segments are loading. It automatically wraps the page and its children in a React Suspense boundary.

// app/dashboard/loading.js
export default function Loading() {
  return (
    <div className="loading">
      <p>Loading dashboard...</p>
      <div className="spinner"></div>
    </div>
  );
}

app/
├── dashboard/
│   ├── loading.js      // Loading UI for dashboard
│   ├── page.js
│   └── settings/
│       ├── loading.js  // Loading UI for settings
│       └── page.js

The loading UI will be shown immediately on navigation and can be nested for granular loading states.

You can create custom not-found pages using the not-found.js file. This file defines UI to render when the notFound() function is thrown within a route segment.

// app/not-found.js
import Link from "next/link";

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  );
}

You can also trigger the not-found page programmatically:

// app/page.js
import { notFound } from "next/navigation";

export default function Page({ params }) {
  const post = getPost(params.id);

  if (!post) {
    notFound();
  }

  return <div>{post.title}</div>;
}

The template.js file is similar to layout.js but creates a new instance for each of its children on navigation. This means state is not preserved and effects are re-synchronized.

// app/template.js
export default function Template({ children }) {
  return <div className="template-wrapper">{children}</div>;
}

Key differences from layout:

• Layout: State is preserved, DOM elements are not re-created
• Template: New instance on navigation, DOM elements are re-created

Templates are useful when you need:

• CSS/JS animations on route changes
• Features that rely on useEffect and useState
• To change the default browser behavior

Nested layouts are implemented by creating layout.js files in different route segments. Layouts are nested automatically based on the folder structure.

app/
├── layout.js           // Root layout
├── page.js             // Home page
└── dashboard/
    ├── layout.js       // Dashboard layout
    ├── page.js         // Dashboard page
    └── settings/
        ├── layout.js   // Settings layout
        └── page.js     // Settings page
jsx
// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>Global Navigation</nav>
        {children}
      </body>
    </html>
  );
}

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <aside>Dashboard Sidebar</aside>
      <main>{children}</main>
    </div>
  );
}

When visiting /dashboard/settings, all three layouts (root, dashboard, settings) will be rendered in a nested structure.

In the App Router, API routes are now called "Route Handlers" and use the route.js file convention instead of the pages-based approach.

Pages Router (API Routes):

pages/api/users.js

App Router (Route Handlers):

app/api/users/route.js
jsx
// app/api/users/route.js
export async function GET(request) {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request) {
  const data = await request.json();
  const user = await createUser(data);
  return Response.json(user, { status: 201 });
}

export async function PUT(request) {
  const data = await request.json();
  const user = await updateUser(data);
  return Response.json(user);
}

export async function DELETE(request) {
  await deleteUser(request.nextUrl.searchParams.get("id"));
  return new Response(null, { status: 204 });
}

Route handlers support all HTTP methods and provide better TypeScript support and Web APIs compatibility.

React Server Components (RSC) are a new React feature that allows components to be rendered on the server. In the App Router, components are Server Components by default.

Server Components (default):

// app/page.js - This is a Server Component
async function ServerComponent() {
  const data = await fetch("https://api.example.com/data");
  const result = await data.json();

  return (
    <div>
      <h1>Server Rendered Data</h1>
      <p>{result.message}</p>
    </div>
  );
}

Client Components (opt-in with "use client"):

// app/components/ClientComponent.js
"use client";

import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
  );
}

Benefits of Server Components:

• Direct access to server-side resources (databases, file system)
• No JavaScript bundle sent to client
• Improved performance and SEO
• Automatic code splitting

When to use Client Components:

• Interactive features (event handlers, state)
• Browser-only APIs (localStorage, geolocation)
• React hooks (useState, useEffect)

You can create error boundaries using the error.js file in a route segment. This file defines UI to render when an error is thrown within that segment.

// app/error.js
import Link from "next/link";

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try Again</button>
      <Link href="/">Return Home</Link>
    </div>
  );
}

You can also throw errors programmatically:

// app/page.js
export default function Page() {
  throw new Error("An unexpected error occurred!");
  return <div>This will not be rendered.</div>;
}

The error boundary will catch the error and display the custom error UI defined in error.js.

In Next.js, components are Server Components by default. To differentiate and create Client Components, you need to add the "use client" directive at the top of the component file.

• Server Components: These run on the server and can access server-side resources like databases and file systems. They do not include any client-side JavaScript in the bundle.

  // app/page.js - This is a Server Component
  async function ServerComponent() {
    const data = await fetch("https://api.example.com/data");
    const result = await data.json();

    return (
      <div>
        <h1>Server Rendered Data</h1>
        <p>{result.message}</p>
      </div>
    );
  }
  

• Client Components: These run on the client side and can use React hooks, manage state, and handle user interactions. They must include the "use client" directive.

  // app/components/ClientComponent.js
  "use client";

  import { useState } from "react";

  export default function ClientComponent() {
    const [count, setCount] = useState(0);

    return (
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    );
  }
  

Use Server Components for static content and data fetching, and Client Components for interactivity and state management.

Next.js provides built-in support for internationalization (i18n) in the App Router. You can configure i18n settings in the next.config.js file.

// next.config.js
module.exports = {
  i18n: {
    locales: ["en", "fr", "de"],
    defaultLocale: "en",
  },
};

You can then create localized content by using dynamic route segments for different languages.

app/
├── [locale]/
│   ├── page.js         // Localized home page
│   └── about/
│       └── page.js     // Localized about page
jsx
// app/[locale]/page.js
import { useRouter } from "next/router";

export default function HomePage() {
  const { locale } = useRouter();

  return <div>Welcome to the {locale} version of the site!</div>;
}

You can also use libraries like next-translate or react-i18next for more advanced i18n features.

The "use server" directive in Next.js is used to indicate that a function should be executed on the server side. It allows you to write server-side logic that can be called from the client side, such as handling form submissions or processing data.

You should use "use server" when you need to perform operations that require server-side capabilities, such as:

• Accessing databases or file systems
• Performing secure operations that should not be exposed to the client
• Handling form submissions and processing data on the server

Example usage:

// app/form-example/page.js
"use server";

export async function handleSubmit(formData) {
  const name = formData.get("name");
  console.log("Form submitted with name:", name);
  return { success: true };
}

export default function FormExample() {
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the handleSubmit function is marked with "use server", indicating that it will run on the server when the form is submitted.

• Use proper HTTP methods (GET, POST, PUT, DELETE) for different operations.
• Validate and sanitize input data to prevent security vulnerabilities.
• Handle errors gracefully and return appropriate HTTP status codes.
• Use middleware for common tasks like authentication and logging.
• Keep API routes modular and organized in separate files or folders.
• Optimize performance by caching responses when appropriate.
• Document your API endpoints for easier consumption by other developers.

In Next.js API routes, you can define different functions for each HTTP method (GET, POST, PUT, DELETE) within the same route file. This allows you to handle different types of requests appropriately.

Example:

// app/api/users/route.js
export async function GET(request) {
  const users = await getUsers();
  return new Response(JSON.stringify(users), {
    headers: { "Content-Type": "application/json" },
  });
}

export async function POST(request) {
  const data = await request.json();
  const user = await createUser(data);
  return new Response(JSON.stringify(user), {
    status: 201,
    headers: { "Content-Type": "application/json" },
  });
}

export async function PUT(request) {
  const data = await request.json();
  const user = await updateUser(data);
  return new Response(JSON.stringify(user), {
    headers: { "Content-Type": "application/json" },
  });
}

export async function DELETE(request) {
  const { searchParams } = new URL(request.url);
  const userId = searchParams.get("id");
  await deleteUser(userId);
  return new Response(null, { status: 204 });
}

In this example, each function corresponds to a specific HTTP method, allowing you to handle requests accordingly.

To validate and sanitize input data in Next.js API routes, you can use libraries like Joi, Yup, or validator.js. These libraries help ensure that the data received from clients meets the expected format and is safe to use.

Example using Joi:

// app/api/users/route.js
import Joi from "joi";

const userSchema = Joi.object({
  name: Joi.string().min(3).max(30).required(),
  email: Joi.string().email().required(),
  age: Joi.number().integer().min(0).optional(),
});

export async function POST(request) {
  const data = await request.json();

  // Validate input data
  const { error, value } = userSchema.validate(data);
  if (error) {
    return new Response(
      JSON.stringify({ error: error.details[0].message }),
      {
        status: 400,
        headers: { "Content-Type": "application/json" },
      }
    );
  }

  // Proceed with sanitized data
  const user = await createUser(value);
  return new Response(JSON.stringify(user), {
    status: 201,
    headers: { "Content-Type": "application/json" },
  });
}

In this example, the userSchema defines the expected structure of the input data. The POST function validates the incoming data against this schema and returns an error response if validation fails.

To handle errors in Next.js API routes, you can use try-catch blocks to catch exceptions and return appropriate HTTP status codes and error messages. This ensures that clients receive meaningful feedback when something goes wrong.

Example:

// app/api/users/route.js
export async function GET(request) {
  try {
    const users = await getUsers();
    return new Response(JSON.stringify(users), {
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    console.error("Error fetching users:", error);
    return new Response(
      JSON.stringify({ error: "Failed to fetch users" }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }
}

export async function POST(request) {
  try {
    const data = await request.json();
    const user = await createUser(data);
    return new Response(JSON.stringify(user), {
      status: 201,
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    console.error("Error creating user:", error);
    return new Response(
      JSON.stringify({ error: "Failed to create user" }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }
}

In this example, both the GET and POST functions include try-catch blocks to handle potential errors. If an error occurs, a 500 Internal Server Error response is returned with a relevant error message.

To keep Next.js API routes modular and organized, you can structure your API routes in a way that groups related functionality together. Here are some best practices:

• Use Folders: Create folders for different resources or functionalities. Each folder can contain route files for that specific resource.

  app/
  ├── api/
  │   ├── users/
  │   │   ├── route.js       // Handles user-related routes
  │   │   └── auth.js        // Authentication logic
  │   ├── products/
  │   │   └── route.js       // Handles product-related routes
  │   └── orders/
  │       └── route.js       // Handles order-related routes
  

• Separate Logic: Keep business logic separate from route handlers. You can create utility functions or services that handle data fetching, processing, and other operations.

  // app/api/users/service.js
  export async function getUsers() {
    // Fetch users from database
  }

  export async function createUser(data) {
    // Create a new user in the database
  }
  

• Use Middleware: Implement middleware for common tasks like authentication, logging, or validation to avoid code duplication across multiple routes.

• Consistent Naming: Use consistent naming conventions for your route files and functions to make it easier to understand their purpose.

• Documentation: Document your API routes and their expected inputs/outputs to help other developers understand how to use them.

By following these practices, you can maintain a clean and organized codebase for your Next.js API routes.

RTK Query is a powerful data fetching and caching tool built on top of Redux Toolkit. You can use RTK Query in a Next.js App Router application to manage server state and interact with APIs efficiently.

Here's how to set up RTK Query in a Next.js App Router project:

1. Install Redux Toolkit and RTK Query:

npm install @reduxjs/toolkit react-redux

1. Create an API slice:

// app/store/apiSlice.js
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => "users",
    }),
  }),
});

export const { useGetUsersQuery } = apiSlice;

1. Set up the Redux store:

// app/store/store.js
import { configureStore } from "@reduxjs/toolkit";
import { apiSlice } from "./apiSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

1. Wrap your application with the Redux Provider:

// app/layout.js
import { Provider } from "react-redux";
import { store } from "./store/store";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>{children}</Provider>
      </body>
    </html>
  );
}

1. Use RTK Query hooks in your components:

// app/page.js
import { useGetUsersQuery } from "./store/apiSlice";

export default function HomePage() {
  const { data: users, error, isLoading } = useGetUsersQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading users</div>;
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Redux Toolkit (RTK) can be seamlessly integrated with Next.js App Router to manage global state in your application. Here's how to set up Redux Toolkit in a Next.js App Router project:

1. Install Redux Toolkit and React-Redux:

npm install @reduxjs/toolkit react-redux

1. Create a Redux slice:

// app/store/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

1. Set up the Redux store:

// app/store/store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

1. Wrap your application with the Redux Provider:

// app/layout.js
import { Provider } from "react-redux";
import { store } from "./store/store";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>{children}</Provider>
      </body>
    </html>
  );
}

1. Use Redux state and actions in your components:

// app/page.js
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store/counterSlice";

export default function HomePage() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

On the server (server components or route handlers) use cookies() from next/headers to read cookies. To set cookies from a route handler, return a Response with a Set-Cookie header or use a helper library in API routes.

// server component
import { cookies } from "next/headers";
const cookieStore = cookies();
const token = cookieStore.get("token")?.value;

// route handler (set cookie)
export function GET() {
  return new Response("ok", {
    headers: { "Set-Cookie": "token=abc; HttpOnly; Path=/" },
  });
}

Use the Web Streams API (ReadableStream) in a route handler to stream data progressively to the client. This is useful for large payloads or server-sent updates.

export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode("chunk1"));
      controller.enqueue(new TextEncoder().encode("chunk2"));
      controller.close();
    },
  });
  return new Response(stream, {
    headers: { "Content-Type": "text/plain" },
  });
}

Use React Testing Library for components and Jest for unit tests. For full page integration you can use next-router-mock or render server components with @testing-library/react plus mocked fetch/next/navigation. For route handler tests, use Supertest or node's fetch mocks.

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.