Notion Next JS Interview Questions

1. What are practical use cases for route groups and how do you implement multiple layouts with them?

Difficulty: HardType: SubjectiveTopic: Route Groups Use Cases

Route groups enable having different layouts for different sections like (marketing) with a public layout and (app) with an authenticated dashboard layout, both living at the root URL level without affecting paths. Create folders like app/(marketing)/layout.js for marketing pages and app/(app)/layout.js for application pages, where each can have completely different navigation, styling, or authentication requirements. Use route groups to organize routes by feature like (admin), (customer), (public) for better code structure, implement A/B testing with different layouts, or opt certain routes out of the root layout by creating multiple root layouts in different groups. The parentheses convention keeps your folder structure organized while maintaining clean URLs, and you can nest route groups for even more granular organization.

2. Explain the typical folder structure of a Next.js application and the purpose of key directories.

Difficulty: MediumType: SubjectiveTopic: Project Structure

A typical Next.js project has a pages or app directory for routes, public directory for static assets served at the root URL like images and fonts, components directory for reusable React components, styles directory for CSS files, and lib or utils for utility functions. The pages/_app.js file wraps all pages and is used for global styles and providers, while pages/_document.js customizes the HTML document structure. The public folder content is accessible at the root path, so public/logo.png is available at /logo.png. In App Router projects, the app directory contains page.js, layout.js, loading.js, and error.js files that define routes and their UI states.

3. Explain how nested layouts work in App Router and how they differ from the Pages Router approach.

Difficulty: MediumType: SubjectiveTopic: Layout System

In App Router, layouts are nested hierarchically where each segment can have its own layout.js that wraps its children, and all parent layouts automatically wrap child layouts creating a composed layout system. The root app/layout.js is required and must contain html and body tags wrapping everything, then each nested route segment like app/dashboard/layout.js adds its own wrapper preserved during navigation within that section. This differs from Pages Router's single _app.js and _document.js approach where you had one global wrapper requiring custom logic for per-page layouts, whereas App Router's nested layouts maintain state across navigations, support multiple root layouts through route groups, and enable partial rendering where only the changing segment re-renders. Layouts can fetch data, be Server or Client Components, and colocate related UI without prop drilling through intermediate pages.

4. What is the purpose of the Head component in Next.js Pages Router?

Difficulty: EasyType: MCQTopic: Head Component

The Head component from next/head allows you to modify the HTML head element to add meta tags, title tags, Open Graph tags, canonical URLs, and other metadata important for SEO and social media sharing. You can use Head in any page or component, and if multiple components render the same meta tag, the last one wins. This makes it easy to customize metadata per page without touching the HTML template directly.

5. What is special about layout.js in the App Router?

Difficulty: MediumType: MCQTopic: Layouts

layout.js defines UI that wraps page components and persists across route changes within that segment without unmounting or re-rendering, maintaining state and avoiding expensive re-initialization. Layouts are nested, so a layout in app/dashboard/layout.js wraps all dashboard routes while inheriting the root app/layout.js wrapper. Layouts receive a children prop containing the nested page or layout, can fetch data asynchronously, and enable shared UI like navigation bars, sidebars, or headers that don't reset when users navigate between pages in that section.

6. Explain how nested routes work in Next.js and provide an example structure.

Difficulty: MediumType: SubjectiveTopic: Routing Fundamentals

Nested routes in Next.js mirror the folder structure where subdirectories create nested URL paths, so pages/blog/index.js creates /blog and pages/blog/[slug].js creates /blog/any-slug for dynamic blog posts. You can nest as deeply as needed with pages/blog/category/[category]/[post].js creating /blog/category/tech/my-post routes. In App Router, folders define route segments and each folder can have its own layout.js that wraps child routes, creating persistent layouts that don't unmount on navigation. For example, app/dashboard/layout.js wraps all /dashboard routes including /dashboard/settings and /dashboard/profile, allowing shared UI and state across related pages.

7. What is a key difference between Next.js and Create React App?

Difficulty: EasyType: MCQTopic: Next.js vs React

Next.js is a framework built on top of React that provides server-side rendering, static site generation, file-based routing, API routes, and built-in optimizations, while Create React App is just a build tool that creates a client-side React application without these features. Next.js applications are production-ready with better SEO, faster initial page loads through pre-rendering, and full-stack capabilities, whereas CRA requires additional libraries and configuration for routing and data fetching.

8. Can you use different rendering methods for different pages in the same Next.js application?

Difficulty: HardType: MCQTopic: Hybrid Rendering

Next.js allows hybrid rendering where each page can independently choose the best rendering strategy by exporting getStaticProps for SSG, getServerSideProps for SSR, or neither for CSR, mixing strategies based on each page's requirements. This flexibility lets you use SSG for your marketing pages and blog for maximum speed, SSR for user dashboards with personalized data, and CSR for highly interactive admin panels, all in the same application. This per-page optimization is a key advantage of Next.js over traditional single-strategy frameworks.

9. What do @ prefixed folders like @team and @analytics represent in App Router?

Difficulty: HardType: MCQTopic: Parallel Routes

Folders prefixed with @ define parallel routes called slots that can render simultaneously in the same layout as separate named children props, enabling complex UI patterns like dashboards with multiple independent sections. A layout can receive multiple slot props like children, team, and analytics and render them in different positions, each with their own loading and error states that are isolated from others. Parallel routes enable conditionally rendering slots based on state, independently loading different sections, and creating modals or split views by intercepting routes into slots.

Master Interviews
Anywhere, Anytime

Quick overview

Notion · Next JS questions (9)

1. What are practical use cases for route groups and how do you implement multiple layouts with them?

Continue your preparation

2. Explain the typical folder structure of a Next.js application and the purpose of key directories.

3. Explain how nested layouts work in App Router and how they differ from the Pages Router approach.

4. What is the purpose of the Head component in Next.js Pages Router?

5. What is special about layout.js in the App Router?

6. Explain how nested routes work in Next.js and provide an example structure.

7. What is a key difference between Next.js and Create React App?

8. Can you use different rendering methods for different pages in the same Next.js application?

9. What do @ prefixed folders like @team and @analytics represent in App Router?

Master Interviews Anywhere, Anytime

Notion Next JS interview questions

Quick overview

1. What are practical use cases for route groups and how do you implement multiple layouts with them?

Continue your preparation

2. Explain the typical folder structure of a Next.js application and the purpose of key directories.

3. Explain how nested layouts work in App Router and how they differ from the Pages Router approach.

4. What is the purpose of the Head component in Next.js Pages Router?

5. What is special about layout.js in the App Router?

6. Explain how nested routes work in Next.js and provide an example structure.

7. What is a key difference between Next.js and Create React App?

8. Can you use different rendering methods for different pages in the same Next.js application?

9. What do @ prefixed folders like @team and @analytics represent in App Router?

Master Interviews
Anywhere, Anytime