All questions
Showing of 94What are the main benefits of using Next.js over Create React App?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
- SEO Optimization: Server-side rendering provides better search engine optimization
- Performance: Automatic code splitting and optimization
- Routing: Built-in file-based routing system
- API Routes: Can create backend endpoints within the same project
- Image Optimization: Built-in image optimization with the Image component
- Developer Experience: Hot reloading, TypeScript support, and better error messages
- Production Ready: Optimized builds with minimal configuration
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
Explain the file-based routing system in Next.js
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Next.js uses a file-based routing system where the file structure in the pages directory (or app directory in App Router) automatically creates routes:
pages/
index.js → /
about.js → /about
contact.js → /contact
blog/
index.js → /blog
[slug].js → /blog/:slug
Each file exports a React component as the default export, which becomes the page component for that route.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is the purpose of the `_app.js` file?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The _app.js file is a custom App component that wraps all page components. It's used to:
- Keep state when navigating between pages
- Add global CSS
- Inject additional data into pages
- Handle global error boundaries
- Add common layout components
function MyApp({ Component, pageProps }) {
return (
<div>
<GlobalHeader />
<Component {...pageProps} />
<GlobalFooter />
</div>
);
}
export default MyApp;
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you add global CSS in Next.js?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Global CSS can only be imported in _app.js:
// pages/_app.js
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are CSS Modules and how do you use them in Next.js?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
CSS Modules allow you to write component-scoped CSS by creating files with .module.css extension:
/* Button.module.css */
.primary {
background-color: blue;
color: white;
}
// Button.js
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Click me</button>;
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is the `public` directory used for?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The public directory serves static assets directly from the root URL. Files in this directory can be accessed without any path prefix:
public/
favicon.ico → /favicon.ico
logo.png → /logo.png
images/
hero.jpg → /images/hero.jpg
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you implement dynamic routing in Next.js?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Dynamic routes are created using square brackets in the filename:
pages/
posts/
[id].js → /posts/:id
[...slug].js → /posts/* (catch-all)
// pages/posts/[id].js
import { useRouter } from 'next/router';
function Post() {
const router = useRouter();
const { id } = router.query;
return <h1>Post: {id}</h1>;
}
export default Post;
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is the difference between `Link` and `router.push()`?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Link: Declarative navigation component for client-side transitionsrouter.push(): Programmatic navigation method
import Link from 'next/link';
import { useRouter } from 'next/router';
function Navigation() {
const router = useRouter();
const handleClick = () => {
router.push('/about');
};
return (
<div>
<Link href="/about">About Page</Link>
<button onClick={handleClick}>Go to About</button>
</div>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is `getStaticProps` and when should you use it?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
getStaticProps fetches data at build time for static generation:
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 3600, // ISR: revalidate every hour
};
}
function Blog({ posts }) {
return (
<div>
{posts.map(post => (
<article key={post.id}>{post.title}</article>
))}
</div>
);
}
Use when: Content is static or changes infrequently, for better performance and SEO.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What is `getServerSideProps` and when should you use it?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
getServerSideProps fetches data on each request at runtime:
export async function getServerSideProps(context) {
const { req, res, params, query } = context;
const data = await fetch(`https://api.example.com/user/${params.id}`);
const user = await data.json();
return {
props: {
user,
},
};
}
Use when: Data changes frequently, requires authentication, or needs request-specific information.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you fetch data on the client-side in Next.js?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use standard React patterns like useEffect or data fetching libraries:
import { useState, useEffect } from 'react';
function Profile() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => {
setUser(data);
setLoading(false);
});
}, []);
if (loading) return <div>Loading...</div>;
return <div>Welcome, {user.name}!</div>;
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you create Client Components in App Router?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use the 'use client' directive at the top of the file:
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do loading states work in App Router?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Create a loading.js file to show loading UI while the page loads:
// app/posts/loading.js
export default function Loading() {
return <div>Loading posts...</div>;
}
// app/posts/page.js
async function PostsPage() {
// This delay will show the loading component
await new Promise(resolve => setTimeout(resolve, 2000));
const posts = await fetch('/api/posts');
return <PostsList posts={posts} />;
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you create API routes in Next.js?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Create files in the pages/api/ directory (Pages Router) or app/api/ directory (App Router):
Pages Router:
// pages/api/users.js
export default function handler(req, res) {
if (req.method === 'GET') {
res.status(200).json({ users: [] });
} else {
res.setHeader('Allow', ['GET']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}
App Router:
// app/api/users/route.js
export async function GET() {
return Response.json({ users: [] });
}
export async function POST(request) {
const data = await request.json();
// Process data
return Response.json({ success: true });
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you handle different HTTP methods in API routes?
How do you access request data in API routes?
How do you optimize images in Next.js?
What are the benefits of the Next.js Image component?
What is the purpose of `next.config.js`?
What styling options are available in Next.js?
How do you use Sass/SCSS in Next.js?
How do you implement styled-jsx in Next.js?
How do you integrate Tailwind CSS with Next.js?
How do you deploy a Next.js application to Vercel?
How do you build a Next.js application for production?
How do you configure environment variables in Next.js?
How do you create custom error pages in Next.js?
How do you set up TypeScript in Next.js?
What is the difference between `_app.js` and `_document.js`?
How do you pass data between pages in Next.js?
What are catch-all routes and how do you implement them?
How does prefetching work in Next.js?
What is `getStaticPaths` and why is it needed?
What is the difference between `fallback: false`, `fallback: true`, and `fallback: 'blocking'`?
What is SWR and how do you use it with Next.js?
Explain the differences between SSR, SSG, and CSR in Next.js
What is Incremental Static Regeneration (ISR)?
What are the main differences between App Router and Pages Router?
How does data fetching differ between App Router and Pages Router?
What are Server Components and how do they work in App Router?
What are layouts in App Router and how do you use them?
How do you handle errors in App Router?
How do you implement authentication in API routes?
How do you handle file uploads in API routes?
How does automatic code splitting work in Next.js?
How do you implement lazy loading in Next.js?
How do you optimize fonts in Next.js?
How do you analyze bundle size in Next.js?
What is the difference between `publicRuntimeConfig` and `serverRuntimeConfig`?
How do you implement redirects and rewrites in Next.js?
How do you generate a sitemap in Next.js?
How do you implement authentication with NextAuth.js?
How do you protect pages with authentication?
How do you implement CORS in Next.js API routes?
How do you implement error boundaries in Next.js?
How do you handle API errors in Next.js?
What is middleware in Next.js and how do you use it?
How do you implement internationalization (i18n) in Next.js?
How do you implement database connections in Next.js?
How do you implement search functionality in Next.js?
How do you implement custom hooks for data fetching in Next.js?
How do you type API routes in TypeScript?
How do you set up testing in Next.js?
How do you test API routes in Next.js?
How do you implement global state management in Next.js?
How do you implement data persistence in Next.js?
How do you create reusable components in Next.js?
How do you integrate a headless CMS with Next.js?
How do you implement MDX in Next.js?
How do you implement hybrid rendering in Next.js?
How do you implement rate limiting in Next.js?
How do you implement Progressive Web App (PWA) features in Next.js?
How do you implement real-time features with WebSockets in Next.js?
How do you implement server-side caching in Next.js?
How do you implement Server Actions in Next.js App Router?
How do you optimize Core Web Vitals in Next.js?
How do you implement A/B testing in Next.js?
How do you implement background jobs in Next.js?
How do you implement performance monitoring in Next.js?
What security considerations should you keep in mind with Next.js?
How do you implement custom server with Next.js?
How do you implement multi-zone deployments in Next.js?
How do you use Next.js with Edge Runtime?
How do you analyze and optimize your Next.js bundle?
How do you implement tree shaking in Next.js?
How do you implement compound components in Next.js?
How do you integrate GraphQL with Next.js?
How do you implement the compound component pattern in Next.js?
How do you implement render props pattern in Next.js?
How do you implement custom webpack configuration in Next.js?
How do you implement custom babel configuration in Next.js?
How do you implement virtualization for large lists in Next.js?
How do you implement infinite scrolling in Next.js?
How do you implement advanced caching strategies in Next.js?
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
Next.js cheatsheet
- Core Concepts01
- Routing02
- Rendering Methods03
- Data Fetching04
- API Routes05
- Styling06
- Image Optimization07
- Performance Optimization08
- Authentication09
- Deployment10
- Key Interview Concepts11
- Interview Preparation Checklist12
- + 1 more inside
- + 7 more inside
80 of 94 Next.js answers are in Pro.
Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.
- Full answers + code
- AI explanations, simpler or deeper
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsDjango
Python Full-Stack DevelopmentRuby on Rails
Convention over ConfigurationServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQInterviewers also test these - they're common to every stack, whichever one you picked above.
FastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDInterviewers also test these - they're common to every stack, whichever one you picked above.
AI Engineer
LLMs, RAG, Agents, EvalsAI-Powered Developer
Claude Code, Copilot, Agentic WorkflowsCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.