Next.js Interview Questions Your Guide to Success

Next.js, a powerful React framework, is essential for building modern web applications with server-side rendering capabilities, making it a crucial skill for frontend and full-stack developers. Stark.ai offers a curated collection of Next.js interview questions, real-world scenarios, and expert guidance to help you excel in your next technical interview.

Next.js Basics & Setup 10
Routing & Navigation 10
Data Fetching 10
Server Side Rendering (SSR) 10
Static Site Generation (SSG) 9
API Routes 10
Pages & Components 9
Layouts & Styling 10
State Management 10
Image Optimization 10
Authentication & Authorization 9
Performance Optimization 8
Middleware & Configuration 10
Testing & Debugging 9

nodejs

php

python

react native

reactjs

sql

svelte

swift

typescript

vuejs

HR Questions MBA Questions Start Mock Interview

nextjs

Next.js Basics & Setup
- What is Next.js and what are its main features?
  
  Next.js is a React framework that provides features like server-side rendering, static site generation, file-based...
- How do you create a new Next.js project?
  
  Create a Next.js project using 'npx create-next-app@latest' or 'yarn create next-app'. This sets up a new project...
- What is the basic project structure of a Next.js application?
  
  Next.js project structure includes pages directory for routes, public for static assets, styles for CSS, components...
- What are the core dependencies of a Next.js project?
  
  Core dependencies include React, React DOM, and Next.js itself. These are automatically included in package.json...
- What are the available script commands in a Next.js project?
  
  Default scripts include 'dev' for development server, 'build' for production build, 'start' for production server,...
- How do you run a Next.js application in development mode?
  
  Run development server using 'npm run dev' or 'yarn dev'. This starts the application with hot reloading at...
- What is the purpose of next.config.js?
  
  next.config.js is a configuration file for customizing Next.js behavior. It can configure webpack, environment...
- How do you handle environment variables in Next.js?
  
  Environment variables are handled using .env files (.env.local, .env.development, .env.production). Variables...
- What is the difference between pages and app directory?
  
  The pages directory uses the Pages Router, while app directory uses the newer App Router. App Router supports React...
- How do you add TypeScript to a Next.js project?
  
  TypeScript is supported out of the box. Create project with --typescript flag or add manually by creating...
Routing & Navigation
- What are the differences between App Router and Pages Router in Next.js?
  
  App Router is newer, uses app directory, supports React Server Components, nested layouts, and improved routing...
- How do you create basic routes in Next.js?
  
  In App Router, create routes by adding page.js files in app directory. In Pages Router, add files to pages...
- What are dynamic routes in Next.js?
  
  Dynamic routes use square brackets for variable segments. Example: [id]/page.js creates dynamic route. Parameters...
- How do you handle client-side navigation?
  
  Use Link component for client-side navigation. Example: <Link href='/about'>About</Link>. Provides automatic...
- What is the useRouter hook?
  
  useRouter hook provides access to router object for programmatic navigation, route information, and parameters....
- How do you create nested routes?
  
  Create nested directories in app or pages folder. Each level can have its own page.js or layout.js. Supports nested...
- What are route groups in Next.js?
  
  Route groups use (groupName) syntax in app directory. Don't affect URL structure. Share layouts within groups....
- How do you handle 404 pages?
  
  Create not-found.js in app directory or 404.js in pages directory. Automatically shown for non-existent routes. Can...
- What is parallel routing in Next.js?
  
  Parallel routing allows simultaneous loading of multiple pages in same layout using @folder convention. Supports...
- How do you handle route parameters?
  
  Access route parameters through params prop in page components or searchParams for query strings. Available in both...
Data Fetching
- What are the different data fetching methods in Next.js 13+?
  
  Next.js 13+ provides async Server Components, fetch() with caching options, server actions, and client-side fetching...
- How do you fetch data in Server Components?
  
  Use async/await directly in Server Components. Example: async function Page() { const data = await...
- What is static data fetching in Next.js?
  
  Static data fetching occurs at build time using fetch with cache: 'force-cache' option. Data is cached and reused...
- How do you implement dynamic data fetching?
  
  Use fetch with cache: 'no-store' option or revalidate: 0 for dynamic data. Data fetched on every request. Suitable...
- What is Incremental Static Regeneration (ISR)?
  
  ISR allows static pages to be updated after build time. Use fetch with revalidate option. Combines benefits of...
- How do you handle client-side data fetching?
  
  Use hooks like useState and useEffect in Client Components, or data fetching libraries like SWR or React Query....
- What are Server Actions in Next.js?
  
  Server Actions allow form handling and data mutations directly from Server Components. Use 'use server' directive....
- How do you implement data caching?
  
  Use fetch cache options or React cache function. Configure cache behavior in fetch requests. Support cache...
- What is parallel data fetching?
  
  Fetch multiple data sources simultaneously using Promise.all or parallel routes. Improve performance by avoiding...
- How do you handle loading states?
  
  Create loading.js files for automatic loading UI. Use Suspense boundaries. Support streaming and progressive...
Server Side Rendering (SSR)
- What is Server-Side Rendering in Next.js?
  
  SSR generates HTML on the server for each request. Provides better initial page load and SEO. Next.js handles SSR...
- What are React Server Components?
  
  Server Components run only on server, reduce client-side JavaScript. Support async data fetching. Cannot use...
- How does hydration work in Next.js?
  
  Hydration attaches JavaScript functionality to server-rendered HTML. Happens automatically after initial page load....
- What is streaming SSR?
  
  Streaming SSR progressively sends HTML chunks as they're generated. Uses <Suspense> boundaries. Improves Time To...
- How do you handle SSR data fetching?
  
  Use async Server Components or getServerSideProps. Data available during render. Support server-only operations....
- What are the benefits of SSR?
  
  Better SEO, faster initial page load, improved performance on slow devices. Support social media previews. Handle...
- How do you access server-only code?
  
  Use 'use server' directive or .server.js files. Handle sensitive operations. Access server-side APIs. Support secure...
- What is server-side rendering cache?
  
  SSR cache stores rendered pages on server. Improves performance for subsequent requests. Supports cache...
- How do you handle SSR errors?
  
  Use error.js files for error boundaries. Handle server-side errors. Support fallback content. Implement error reporting.
- What is the difference between SSR and SSG?
  
  SSR generates HTML per request, SSG at build time. SSR better for dynamic content, SSG for static. Trade-off between...
Static Site Generation (SSG)
- What is Static Site Generation in Next.js?
  
  SSG generates HTML at build time instead of runtime. Pages are pre-rendered and can be served from CDN. Provides...
- How do you implement SSG in Next.js?
  
  Use generateStaticParams for App Router or getStaticProps/getStaticPaths for Pages Router. Pages are built at build...
- How do you handle dynamic routes in SSG?
  
  Define dynamic paths using generateStaticParams or getStaticPaths. Specify which paths to pre-render. Support...
- What is the fallback option in SSG?
  
  Fallback controls behavior for non-generated paths. Options: false (404), true (loading), or 'blocking' (SSR)....
- How do you implement data fetching for SSG?
  
  Fetch data during build using async components or getStaticProps. Data available at build time. Support external...
- What are the benefits of SSG?
  
  Fastest page loads, better SEO, reduced server load, improved security. Pages can be served from CDN. Support global...
- How do you validate static paths?
  
  Implement path validation during build. Handle invalid paths. Support custom validation. Implement error handling...
- What is build time data fetching?
  
  Data fetched during npm run build. Available for static page generation. Support external data sources. Handle...
- How do you handle static assets in SSG?
  
  Place assets in public directory. Support automatic optimization. Handle asset references. Implement asset...
API Routes
- What are API Routes in Next.js?
  
  API Routes are serverless endpoints built into Next.js. Created in pages/api directory (Pages Router) or app/api...
- How do you create a basic API route?
  
  Create a file in app/api directory that exports default async function. Handle request methods (GET, POST, etc.)....
- How do you handle different HTTP methods?
  
  Export functions named after HTTP methods (GET, POST, PUT, DELETE). Or use conditional logic in Pages Router....
- How do you access query parameters?
  
  Access query params through request.nextUrl.searchParams in App Router or req.query in Pages Router. Parse and...
- How do you handle POST requests?
  
  Access request body using await request.json() or similar methods. Validate request data. Process POST data. Return...
- What are dynamic API routes?
  
  Use square brackets for dynamic segments [param]. Access parameters through route object. Support multiple dynamic...
- How do you handle API errors?
  
  Return appropriate status codes and error messages. Use try-catch blocks. Implement error handling middleware....
- How do you handle CORS in API routes?
  
  Configure CORS headers using middleware or within route handlers. Set Access-Control-Allow-Origin and other headers....
- What are API middlewares?
  
  Middleware processes requests before reaching route handlers. Handle authentication, logging, CORS. Support...
- How do you handle file uploads?
  
  Process multipart/form-data using appropriate middleware. Handle file storage. Validate file types and sizes....
Pages & Components
- What is the difference between pages and components in Next.js?
  
  Pages are special components that become routes automatically when placed in pages/ or app/ directory. Components...
- What is a Server Component?
  
  Server Components are rendered on server by default in App Router. Cannot use browser APIs or React hooks. Better...
- What is a Client Component?
  
  Client Components use 'use client' directive. Can use browser APIs and React hooks. Enable interactive features. Run...
- How do you create a layout component?
  
  Create layout.js file in app directory. Wraps child pages/components. Shares UI across routes. Supports nested...
- What is component hydration?
  
  Hydration attaches JavaScript event handlers to server-rendered HTML. Makes static content interactive. Happens...
- How do you handle metadata in pages?
  
  Use metadata object or generateMetadata function in page files. Set title, description, open graph data. Support...
- What is error handling in pages?
  
  Create error.js files for error boundaries. Handle component errors. Support fallback content. Implement error...
- What are dynamic segments in pages?
  
  Use [param] syntax for dynamic routes. Access parameters through props. Support multiple segments. Handle parameter...
- How do you share state between components?
  
  Use React Context, state management libraries, or lift state up. Handle component communication. Support state...
Layouts & Styling
- What are layout components in Next.js?
  
  Layout components are created using layout.js files. Share UI between pages. Support nested layouts. Handle...
- How do you implement CSS Modules in Next.js?
  
  Use .module.css files for component-scoped CSS. Import styles as objects. Support local class naming. Automatic...
- What is global styling in Next.js?
  
  Import global CSS in app/layout.js or pages/_app.js. Apply styles across all components. Support reset styles and...
- How do you handle responsive layouts?
  
  Use media queries, CSS Grid, Flexbox. Support mobile-first design. Handle breakpoints. Implement responsive...
- What are nested layouts?
  
  Create multiple layout.js files in route segments. Support layout hierarchy. Share UI between related routes. Handle...
- How do you use Tailwind CSS in Next.js?
  
  Install and configure Tailwind CSS. Use utility classes. Support JIT mode. Handle Tailwind configuration. Implement...
- What are route groups in layouts?
  
  Use (group) folders to organize routes. Don't affect URL structure. Share layouts within groups. Support multiple groups.
- How do you handle dynamic styles?
  
  Use CSS-in-JS solutions or dynamic class names. Support runtime styles. Handle style variables. Implement dynamic theming.
- What is CSS-in-JS support?
  
  Support styled-components, Emotion, and other CSS-in-JS libraries. Handle server-side rendering. Support dynamic...
- How do you handle layout transitions?
  
  Implement page and layout transitions. Support animation effects. Handle transition states. Implement smooth...
State Management
- What are the different state management options in Next.js?
  
  Next.js supports multiple state management options: React's built-in useState and useContext, external libraries...
- How do you handle local component state?
  
  Use useState hook for component-level state. Handle state updates. Support state initialization. Implement local...
- What is Context API in Next.js?
  
  Context API shares state between components without prop drilling. Create providers and consumers. Handle context...
- How do you integrate Redux with Next.js?
  
  Configure Redux store with Next.js. Handle server-side state hydration. Support Redux middleware. Implement Redux...
- What is SWR and how is it used?
  
  SWR is a React hooks library for data fetching. Handles caching, revalidation, and real-time updates. Support...
- How do you handle form state?
  
  Use form libraries like React Hook Form or Formik. Handle form validation. Support form submission. Implement form...
- What is state persistence?
  
  Store state in localStorage or sessionStorage. Handle state recovery. Support persistence strategies. Implement...
- How do you handle URL state?
  
  Use query parameters and URL segments for state. Handle URL updates. Support navigation state. Implement URL-based...
- What is state initialization in SSR?
  
  Initialize state during server-side rendering. Handle state hydration. Support initial data loading. Implement SSR...
- How do you handle async state?
  
  Manage loading, error, and success states. Handle async operations. Support state transitions. Implement async...
Image Optimization
- What is the Next.js Image component?
  
  Next.js Image component is an extension of HTML <img> tag. Provides automatic image optimization. Supports lazy...
- How do you use the Next.js Image component?
  
  Import Image from 'next/image'. Add src, alt, width, and height props. Component optimizes and serves images...
- What are the benefits of image optimization?
  
  Reduces image file size, improves page load speed, supports responsive images, optimizes for different devices,...
- How does lazy loading work with images?
  
  Images load only when they enter viewport. Reduces initial page load time. Uses loading='lazy' attribute...
- What is responsive image sizing?
  
  Images adapt to different screen sizes. Uses sizes prop for viewport-based sizing. Supports srcset generation....
- How do you handle image quality?
  
  Use quality prop to set compression level. Default is 75. Balance between quality and file size. Support different...
- What is blur placeholder?
  
  Shows blurred version of image while loading. Use placeholder='blur' prop. Supports blurDataURL for custom blur....
- How do you handle remote images?
  
  Configure domains in next.config.js. Use loader prop for custom image service. Support remote image optimization....
- What are static image imports?
  
  Import images as modules. Get width and height automatically. Support webpack optimization. Handle static image assets.
- How do you configure image formats?
  
  Support WebP, AVIF formats. Use formats prop for specific formats. Handle browser compatibility. Implement format strategies.
Authentication & Authorization
- What are the authentication options in Next.js?
  
  Next.js supports multiple authentication methods: JWT, session-based, OAuth providers, NextAuth.js library. Can...
- What is NextAuth.js?
  
  NextAuth.js is a complete authentication solution for Next.js applications. Provides built-in support for multiple...
- How do you handle JWT in Next.js?
  
  Store JWT in HTTP-only cookies or local storage. Implement token verification. Handle token expiration. Support...
- What is session-based authentication?
  
  Store session data on server. Use session cookies for client identification. Handle session expiration. Support...
- How do you implement OAuth authentication?
  
  Configure OAuth providers. Handle OAuth flow. Support callback URLs. Implement user profile retrieval. Manage OAuth tokens.
- How do you handle role-based access?
  
  Implement role checking middleware. Define user roles. Handle permission checks. Support role hierarchies. Implement...
- How do you secure API routes?
  
  Implement authentication middleware. Verify tokens or sessions. Handle unauthorized requests. Support API security....
- What is CSRF protection?
  
  Implement CSRF tokens. Handle token validation. Support form submissions. Implement security headers. Prevent...
- How do you handle authentication state?
  
  Manage user authentication state. Handle state persistence. Support state updates. Implement state management....
Performance Optimization
- What are Core Web Vitals in Next.js?
  
  Core Web Vitals are key metrics measuring user experience: LCP (Largest Contentful Paint), FID (First Input Delay),...
- What is code splitting in Next.js?
  
  Code splitting automatically splits JavaScript bundles by route. Reduces initial bundle size. Supports dynamic...
- How does image optimization work?
  
  Next.js Image component automatically optimizes images. Supports lazy loading, responsive sizes, modern formats....
- What is automatic static optimization?
  
  Next.js automatically determines which pages can be statically generated. Improves page load performance. Supports...
- What is script optimization?
  
  Next.js Script component optimizes third-party script loading. Supports loading strategies (defer, lazy). Prevents...
- How does route prefetching work?
  
  Next.js automatically prefetches links in viewport. Reduces page load time. Supports custom prefetch behavior. Uses...
- What is font optimization?
  
  Next.js automatically optimizes font loading. Reduces layout shift. Supports CSS size-adjust. Implements font...
- How does caching work in Next.js?
  
  Next.js supports multiple caching strategies: build-time cache, server-side cache, client-side cache. Improves...
Middleware & Configuration
- What is middleware in Next.js?
  
  Middleware runs before request is completed. Enables custom code execution between request and response. Can modify...
- How do you configure next.config.js?
  
  next.config.js is used for custom Next.js configuration. Supports various options like rewrites, redirects,...
- What are environment variables in Next.js?
  
  Environment variables configured in .env files. Support different environments (.env.local, .env.production). Access...
- How do you handle redirects?
  
  Configure redirects in next.config.js using redirects array. Support permanent/temporary redirects. Handle path...
- What are rewrites in Next.js?
  
  Rewrites allow URL mapping without path change. Configured in next.config.js. Support external rewrites. Handle path...
- How do you configure headers?
  
  Add custom headers using headers in next.config.js. Support security headers, CORS headers. Handle header...
- What is the middleware matcher?
  
  Matcher defines paths where middleware runs. Uses path matching patterns. Support multiple matchers. Handle path...
- How do you handle webpack configuration?
  
  Customize webpack config in next.config.js. Modify loaders, plugins, optimization settings. Support module...
- What is the basePath configuration?
  
  basePath sets base URL path for application. Useful for sub-path deployments. Handle path prefixing. Support path...
- How do you configure image domains?
  
  Configure allowed image domains in next.config.js. Support external image optimization. Handle domain whitelist....
Testing & Debugging
- What testing frameworks are recommended for Next.js?
  
  Jest and React Testing Library are recommended for unit and integration testing. Cypress or Playwright for...
- How do you set up Jest with Next.js?
  
  Configure jest.config.js for Next.js. Set up environment and transforms. Handle module mocking. Support TypeScript...
- How do you test pages in Next.js?
  
  Use React Testing Library to render pages. Test page components. Handle data fetching. Support routing tests. Test...
- What is the Next.js debugging process?
  
  Use Chrome DevTools or VS Code debugger. Set breakpoints. Inspect component state. Handle error tracing. Support source maps.
- How do you test API routes?
  
  Mock HTTP requests. Test API endpoints. Handle response validation. Support API testing. Implement test scenarios.
- What is snapshot testing?
  
  Captures component output. Compares against stored snapshots. Detects UI changes. Support snapshot updates. Handle...
- How do you debug server-side code?
  
  Use Node.js debugger. Handle server breakpoints. Inspect server state. Support server-side debugging. Implement logging.
- What is unit testing in Next.js?
  
  Test individual components/functions. Handle isolated testing. Support test coverage. Implement unit test cases....
- How do you handle test data?
  
  Create test fixtures. Handle mock data. Support test databases. Implement data generation. Handle test state.

What is Next.js and what are its main features?

Next.js is a React framework that provides features like server-side rendering, static site generation, file-based routing, API routes, and built-in optimizations. It simplifies building production-ready React applications with improved performance and SEO capabilities.

How do you create a new Next.js project?

Create a Next.js project using 'npx create-next-app@latest' or 'yarn create next-app'. This sets up a new project with default configuration including TypeScript support, ESLint, and basic project structure.

What is the basic project structure of a Next.js application?

Next.js project structure includes pages directory for routes, public for static assets, styles for CSS, components for reusable UI components, and next.config.js for configuration. The app directory is used for the App Router in newer versions.

What are the core dependencies of a Next.js project?

Core dependencies include React, React DOM, and Next.js itself. These are automatically included in package.json when creating a new project. Additional dependencies can be added based on project requirements.

What are the available script commands in a Next.js project?

Default scripts include 'dev' for development server, 'build' for production build, 'start' for production server, and 'lint' for linting. These are defined in package.json and can be run using npm or yarn.

How do you run a Next.js application in development mode?

Run development server using 'npm run dev' or 'yarn dev'. This starts the application with hot reloading at localhost:3000 by default. Changes are automatically reflected without manual refresh.

What is the purpose of next.config.js?

next.config.js is a configuration file for customizing Next.js behavior. It can configure webpack, environment variables, redirects, rewrites, image optimization, and other build-time features.

How do you handle environment variables in Next.js?

Environment variables are handled using .env files (.env.local, .env.development, .env.production). Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Others are only available server-side.

What is the difference between pages and app directory?

The pages directory uses the Pages Router, while app directory uses the newer App Router. App Router supports React Server Components, nested layouts, and improved routing patterns by default.

How do you add TypeScript to a Next.js project?

TypeScript is supported out of the box. Create project with --typescript flag or add manually by creating tsconfig.json and installing typescript and @types/react. Next.js automatically detects and configures TypeScript.

What are the differences between App Router and Pages Router in Next.js?

App Router is newer, uses app directory, supports React Server Components, nested layouts, and improved routing patterns. Pages Router uses pages directory, is simpler but lacks some modern features like server components.

How do you create basic routes in Next.js?

In App Router, create routes by adding page.js files in app directory. In Pages Router, add files to pages directory. File names become URL paths. For example, app/about/page.js becomes /about route.

What are dynamic routes in Next.js?

Dynamic routes use square brackets for variable segments. Example: [id]/page.js creates dynamic route. Parameters accessible via params prop in page components. Supports catch-all routes using [...slug].

How do you handle client-side navigation?

Use Link component for client-side navigation. Example: <Link href='/about'>About</Link>. Provides automatic code-splitting and prefetching. Supports dynamic routes and parameters.

What is the useRouter hook?

useRouter hook provides access to router object for programmatic navigation, route information, and parameters. Example: const router = useRouter(); router.push('/route'). Available in client components.

How do you create nested routes?

Create nested directories in app or pages folder. Each level can have its own page.js or layout.js. Supports nested layouts and shared UI. URLs reflect directory structure.

What are route groups in Next.js?

Route groups use (groupName) syntax in app directory. Don't affect URL structure. Share layouts within groups. Organize routes logically. Support multiple groups.

How do you handle 404 pages?

Create not-found.js in app directory or 404.js in pages directory. Automatically shown for non-existent routes. Can be customized with own content and styling.

What is parallel routing in Next.js?

Parallel routing allows simultaneous loading of multiple pages in same layout using @folder convention. Supports independent loading states and error handling for each route.

How do you handle route parameters?

Access route parameters through params prop in page components or searchParams for query strings. Available in both server and client components. Support type safety with TypeScript.

What are the different data fetching methods in Next.js 13+?

Next.js 13+ provides async Server Components, fetch() with caching options, server actions, and client-side fetching methods. Supports static and dynamic data fetching with options for revalidation.

How do you fetch data in Server Components?

Use async/await directly in Server Components. Example: async function Page() { const data = await fetch('api/data'); return <Component data={data} />}. Supports automatic caching and revalidation.

What is static data fetching in Next.js?

Static data fetching occurs at build time using fetch with cache: 'force-cache' option. Data is cached and reused across requests. Suitable for content that doesn't change frequently.

How do you implement dynamic data fetching?

Use fetch with cache: 'no-store' option or revalidate: 0 for dynamic data. Data fetched on every request. Suitable for real-time or frequently changing data.

What is Incremental Static Regeneration (ISR)?

ISR allows static pages to be updated after build time. Use fetch with revalidate option. Combines benefits of static and dynamic rendering. Pages regenerated based on time interval.

How do you handle client-side data fetching?

Use hooks like useState and useEffect in Client Components, or data fetching libraries like SWR or React Query. Handle loading states and errors. Support real-time updates.

What are Server Actions in Next.js?

Server Actions allow form handling and data mutations directly from Server Components. Use 'use server' directive. Support progressive enhancement. Handle form submissions securely.

How do you implement data caching?

Use fetch cache options or React cache function. Configure cache behavior in fetch requests. Support cache revalidation. Handle cache invalidation.

What is parallel data fetching?

Fetch multiple data sources simultaneously using Promise.all or parallel routes. Improve performance by avoiding waterfall requests. Handle loading states independently.

How do you handle loading states?

Create loading.js files for automatic loading UI. Use Suspense boundaries. Support streaming and progressive rendering. Implement loading skeletons.

What is Server-Side Rendering in Next.js?

SSR generates HTML on the server for each request. Provides better initial page load and SEO. Next.js handles SSR automatically. Combines with client-side hydration for interactivity.

What are React Server Components?

Server Components run only on server, reduce client-side JavaScript. Support async data fetching. Cannot use client-side hooks or browser APIs. Improve performance and bundle size.

How does hydration work in Next.js?

Hydration attaches JavaScript functionality to server-rendered HTML. Happens automatically after initial page load. Makes static content interactive. Preserves server-rendered state.

What is streaming SSR?

Streaming SSR progressively sends HTML chunks as they're generated. Uses <Suspense> boundaries. Improves Time To First Byte (TTFB). Supports progressive rendering.

How do you handle SSR data fetching?

Use async Server Components or getServerSideProps. Data available during render. Support server-only operations. Handle loading states.

What are the benefits of SSR?

Better SEO, faster initial page load, improved performance on slow devices. Support social media previews. Handle browser without JavaScript. Improve accessibility.

How do you access server-only code?

Use 'use server' directive or .server.js files. Handle sensitive operations. Access server-side APIs. Support secure data handling.

What is server-side rendering cache?

SSR cache stores rendered pages on server. Improves performance for subsequent requests. Supports cache invalidation. Handle cache strategies.

How do you handle SSR errors?

Use error.js files for error boundaries. Handle server-side errors. Support fallback content. Implement error reporting.

What is the difference between SSR and SSG?

SSR generates HTML per request, SSG at build time. SSR better for dynamic content, SSG for static. Trade-off between freshness and performance.

What is Static Site Generation in Next.js?

SSG generates HTML at build time instead of runtime. Pages are pre-rendered and can be served from CDN. Provides fastest possible performance. Ideal for content that doesn't change frequently.

How do you implement SSG in Next.js?

Use generateStaticParams for App Router or getStaticProps/getStaticPaths for Pages Router. Pages are built at build time. Support static data fetching. Content cached and reused.

How do you handle dynamic routes in SSG?

Define dynamic paths using generateStaticParams or getStaticPaths. Specify which paths to pre-render. Support fallback behavior. Handle path generation.

What is the fallback option in SSG?

Fallback controls behavior for non-generated paths. Options: false (404), true (loading), or 'blocking' (SSR). Affects user experience and build time.

How do you implement data fetching for SSG?

Fetch data during build using async components or getStaticProps. Data available at build time. Support external APIs. Handle build-time data requirements.

What are the benefits of SSG?

Fastest page loads, better SEO, reduced server load, improved security. Pages can be served from CDN. Support global deployment. Lower hosting costs.

How do you validate static paths?

Implement path validation during build. Handle invalid paths. Support custom validation. Implement error handling for path generation.

What is build time data fetching?

Data fetched during npm run build. Available for static page generation. Support external data sources. Handle build-time operations.

How do you handle static assets in SSG?

Place assets in public directory. Support automatic optimization. Handle asset references. Implement asset management strategies.

What are API Routes in Next.js?

API Routes are serverless endpoints built into Next.js. Created in pages/api directory (Pages Router) or app/api directory (App Router). Handle HTTP requests and provide backend functionality.

How do you create a basic API route?

Create a file in app/api directory that exports default async function. Handle request methods (GET, POST, etc.). Return Response object. Example: export async function GET() { return Response.json({ data: 'hello' }) }

How do you handle different HTTP methods?

Export functions named after HTTP methods (GET, POST, PUT, DELETE). Or use conditional logic in Pages Router. Support method-specific logic. Handle unsupported methods.

How do you access query parameters?

Access query params through request.nextUrl.searchParams in App Router or req.query in Pages Router. Parse and validate parameters. Handle missing parameters.

How do you handle POST requests?

Access request body using await request.json() or similar methods. Validate request data. Process POST data. Return appropriate response.

What are dynamic API routes?

Use square brackets for dynamic segments [param]. Access parameters through route object. Support multiple dynamic segments. Handle parameter validation.

How do you handle API errors?

Return appropriate status codes and error messages. Use try-catch blocks. Implement error handling middleware. Support error logging.

How do you handle CORS in API routes?

Configure CORS headers using middleware or within route handlers. Set Access-Control-Allow-Origin and other headers. Handle preflight requests.

What are API middlewares?

Middleware processes requests before reaching route handlers. Handle authentication, logging, CORS. Support middleware chains. Implement custom middleware.

How do you handle file uploads?

Process multipart/form-data using appropriate middleware. Handle file storage. Validate file types and sizes. Implement upload progress.

What is the difference between pages and components in Next.js?

Pages are special components that become routes automatically when placed in pages/ or app/ directory. Components are reusable UI pieces that don't create routes. Pages can use getStaticProps/getServerSideProps while components cannot.

What is a Server Component?

Server Components are rendered on server by default in App Router. Cannot use browser APIs or React hooks. Better performance and bundle size. Support async operations directly.

What is a Client Component?

Client Components use 'use client' directive. Can use browser APIs and React hooks. Enable interactive features. Run on client side after hydration.

How do you create a layout component?

Create layout.js file in app directory. Wraps child pages/components. Shares UI across routes. Supports nested layouts. Uses children prop for content injection.

What is component hydration?

Hydration attaches JavaScript event handlers to server-rendered HTML. Makes static content interactive. Happens automatically after initial load. Preserves server-rendered state.

How do you handle metadata in pages?

Use metadata object or generateMetadata function in page files. Set title, description, open graph data. Support dynamic metadata. Handle SEO requirements.

What is error handling in pages?

Create error.js files for error boundaries. Handle component errors. Support fallback content. Implement error reporting. Manage error states.

What are dynamic segments in pages?

Use [param] syntax for dynamic routes. Access parameters through props. Support multiple segments. Handle parameter validation. Implement dynamic routing.

How do you share state between components?

Use React Context, state management libraries, or lift state up. Handle component communication. Support state updates. Implement state management patterns.

What are layout components in Next.js?

Layout components are created using layout.js files. Share UI between pages. Support nested layouts. Handle persistent navigation and UI elements. Available in App Router.

How do you implement CSS Modules in Next.js?

Use .module.css files for component-scoped CSS. Import styles as objects. Support local class naming. Automatic unique class generation. Built-in support in Next.js.

What is global styling in Next.js?

Import global CSS in app/layout.js or pages/_app.js. Apply styles across all components. Support reset styles and base themes. Handle global styling patterns.

How do you handle responsive layouts?

Use media queries, CSS Grid, Flexbox. Support mobile-first design. Handle breakpoints. Implement responsive patterns. Support different screen sizes.

What are nested layouts?

Create multiple layout.js files in route segments. Support layout hierarchy. Share UI between related routes. Handle layout composition.

How do you use Tailwind CSS in Next.js?

Install and configure Tailwind CSS. Use utility classes. Support JIT mode. Handle Tailwind configuration. Implement responsive design.

What are route groups in layouts?

Use (group) folders to organize routes. Don't affect URL structure. Share layouts within groups. Support multiple groups.

How do you handle dynamic styles?

Use CSS-in-JS solutions or dynamic class names. Support runtime styles. Handle style variables. Implement dynamic theming.

What is CSS-in-JS support?

Support styled-components, Emotion, and other CSS-in-JS libraries. Handle server-side rendering. Support dynamic styles. Implement styling patterns.

How do you handle layout transitions?

Implement page and layout transitions. Support animation effects. Handle transition states. Implement smooth navigation experiences.

What are the different state management options in Next.js?

Next.js supports multiple state management options: React's built-in useState and useContext, external libraries like Redux and Zustand, server state with React Query/SWR. Choose based on application needs.

How do you handle local component state?

Use useState hook for component-level state. Handle state updates. Support state initialization. Implement local state patterns. Manage state lifecycle.

What is Context API in Next.js?

Context API shares state between components without prop drilling. Create providers and consumers. Handle context updates. Support global state patterns.

How do you integrate Redux with Next.js?

Configure Redux store with Next.js. Handle server-side state hydration. Support Redux middleware. Implement Redux patterns. Manage store configuration.

What is SWR and how is it used?

SWR is a React hooks library for data fetching. Handles caching, revalidation, and real-time updates. Support optimistic updates. Implement data fetching patterns.

How do you handle form state?

Use form libraries like React Hook Form or Formik. Handle form validation. Support form submission. Implement form state patterns. Manage form data.

What is state persistence?

Store state in localStorage or sessionStorage. Handle state recovery. Support persistence strategies. Implement state serialization. Manage persistent data.

How do you handle URL state?

Use query parameters and URL segments for state. Handle URL updates. Support navigation state. Implement URL-based patterns. Manage route state.

What is state initialization in SSR?

Initialize state during server-side rendering. Handle state hydration. Support initial data loading. Implement SSR state patterns.

How do you handle async state?

Manage loading, error, and success states. Handle async operations. Support state transitions. Implement async patterns. Manage async flow.

What is the Next.js Image component?

Next.js Image component is an extension of HTML <img> tag. Provides automatic image optimization. Supports lazy loading, responsive sizing, and modern image formats. Handles image optimization on-demand.

How do you use the Next.js Image component?

Import Image from 'next/image'. Add src, alt, width, and height props. Component optimizes and serves images automatically. Example: <Image src='/img.png' alt='image' width={500} height={300} />

What are the benefits of image optimization?

Reduces image file size, improves page load speed, supports responsive images, optimizes for different devices, reduces bandwidth usage, improves Core Web Vitals scores.

How does lazy loading work with images?

Images load only when they enter viewport. Reduces initial page load time. Uses loading='lazy' attribute automatically. Supports intersection observer API.

What is responsive image sizing?

Images adapt to different screen sizes. Uses sizes prop for viewport-based sizing. Supports srcset generation. Implements responsive design patterns.

How do you handle image quality?

Use quality prop to set compression level. Default is 75. Balance between quality and file size. Support different quality levels for different images.

What is blur placeholder?

Shows blurred version of image while loading. Use placeholder='blur' prop. Supports blurDataURL for custom blur. Improves perceived performance.

How do you handle remote images?

Configure domains in next.config.js. Use loader prop for custom image service. Support remote image optimization. Handle remote image domains.

What are static image imports?

Import images as modules. Get width and height automatically. Support webpack optimization. Handle static image assets.

How do you configure image formats?

Support WebP, AVIF formats. Use formats prop for specific formats. Handle browser compatibility. Implement format strategies.

What are the authentication options in Next.js?

Next.js supports multiple authentication methods: JWT, session-based, OAuth providers, NextAuth.js library. Can implement custom authentication or use third-party solutions. Supports both client and server-side authentication.

What is NextAuth.js?

NextAuth.js is a complete authentication solution for Next.js applications. Provides built-in support for multiple providers (OAuth, email, credentials). Handles sessions, JWT, and database integration.

How do you handle JWT in Next.js?

Store JWT in HTTP-only cookies or local storage. Implement token verification. Handle token expiration. Support refresh tokens. Manage token lifecycle.

What is session-based authentication?

Store session data on server. Use session cookies for client identification. Handle session expiration. Support session persistence. Implement session management.

How do you implement OAuth authentication?

Configure OAuth providers. Handle OAuth flow. Support callback URLs. Implement user profile retrieval. Manage OAuth tokens.

How do you handle role-based access?

Implement role checking middleware. Define user roles. Handle permission checks. Support role hierarchies. Implement access control.

How do you secure API routes?

Implement authentication middleware. Verify tokens or sessions. Handle unauthorized requests. Support API security. Implement rate limiting.

What is CSRF protection?

Implement CSRF tokens. Handle token validation. Support form submissions. Implement security headers. Prevent cross-site request forgery.

How do you handle authentication state?

Manage user authentication state. Handle state persistence. Support state updates. Implement state management. Handle state synchronization.

What are Core Web Vitals in Next.js?

Core Web Vitals are key metrics measuring user experience: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift). Next.js provides built-in optimizations for these metrics.

What is code splitting in Next.js?

Code splitting automatically splits JavaScript bundles by route. Reduces initial bundle size. Supports dynamic imports. Improves page load performance. Built into Next.js by default.

How does image optimization work?

Next.js Image component automatically optimizes images. Supports lazy loading, responsive sizes, modern formats. Reduces image file size. Improves loading performance.

What is automatic static optimization?

Next.js automatically determines which pages can be statically generated. Improves page load performance. Supports hybrid static and dynamic pages. No configuration required.

What is script optimization?

Next.js Script component optimizes third-party script loading. Supports loading strategies (defer, lazy). Prevents render blocking. Improves page performance.

How does route prefetching work?

Next.js automatically prefetches links in viewport. Reduces page load time. Supports custom prefetch behavior. Uses intersection observer API.

What is font optimization?

Next.js automatically optimizes font loading. Reduces layout shift. Supports CSS size-adjust. Implements font display strategies.

How does caching work in Next.js?

Next.js supports multiple caching strategies: build-time cache, server-side cache, client-side cache. Improves response times. Supports cache invalidation.

What is middleware in Next.js?

Middleware runs before request is completed. Enables custom code execution between request and response. Can modify response, redirect requests, add headers. Defined in middleware.ts file.

How do you configure next.config.js?

next.config.js is used for custom Next.js configuration. Supports various options like rewrites, redirects, environment variables. Exports configuration object or function.

What are environment variables in Next.js?

Environment variables configured in .env files. Support different environments (.env.local, .env.production). Access via process.env. NEXT_PUBLIC_ prefix for client-side access.

How do you handle redirects?

Configure redirects in next.config.js using redirects array. Support permanent/temporary redirects. Handle path matching. Implement redirect conditions.

What are rewrites in Next.js?

Rewrites allow URL mapping without path change. Configured in next.config.js. Support external rewrites. Handle path transformation. Maintain URL appearance.

How do you configure headers?

Add custom headers using headers in next.config.js. Support security headers, CORS headers. Handle header conditions. Implement header policies.

What is the middleware matcher?

Matcher defines paths where middleware runs. Uses path matching patterns. Support multiple matchers. Handle path exclusions. Configure middleware scope.

How do you handle webpack configuration?

Customize webpack config in next.config.js. Modify loaders, plugins, optimization settings. Support module customization. Handle build process.

What is the basePath configuration?

basePath sets base URL path for application. Useful for sub-path deployments. Handle path prefixing. Support path configuration.

How do you configure image domains?

Configure allowed image domains in next.config.js. Support external image optimization. Handle domain whitelist. Implement image security.

What testing frameworks are recommended for Next.js?

Jest and React Testing Library are recommended for unit and integration testing. Cypress or Playwright for end-to-end testing. Vitest gaining popularity for faster test execution. Built-in Next.js testing support.

How do you set up Jest with Next.js?

Configure jest.config.js for Next.js. Set up environment and transforms. Handle module mocking. Support TypeScript testing. Default configuration available with next/jest.

How do you test pages in Next.js?

Use React Testing Library to render pages. Test page components. Handle data fetching. Support routing tests. Test page lifecycle.

What is the Next.js debugging process?

Use Chrome DevTools or VS Code debugger. Set breakpoints. Inspect component state. Handle error tracing. Support source maps.

How do you test API routes?

Mock HTTP requests. Test API endpoints. Handle response validation. Support API testing. Implement test scenarios.

What is snapshot testing?

Captures component output. Compares against stored snapshots. Detects UI changes. Support snapshot updates. Handle snapshot maintenance.

How do you debug server-side code?

Use Node.js debugger. Handle server breakpoints. Inspect server state. Support server-side debugging. Implement logging.

What is unit testing in Next.js?

Test individual components/functions. Handle isolated testing. Support test coverage. Implement unit test cases. Handle component logic.

How do you handle test data?

Create test fixtures. Handle mock data. Support test databases. Implement data generation. Handle test state.

Career Essentials

Skill Builder

Confirm Action

Login to Stark.ai

Please Verify Your Phone or Email

Set Learning Alerts