Next.js Framework interview questions with detailed answers and code examples
These questions cover a range of topics from basic concepts to advanced features to help you prepare for a Next.js (React-based, JavaScript) interview.
1. What is Next.js and why would you choose it over plain React?
» Answer: Next.js is a React framework that enables functionality such as server-side rendering (SSR), static site generation (SSG), and built-in routing. It improves performance, SEO, and developer experience by providing opinionated defaults and a simplified configuration.
Code Example:
No code is needed for this conceptual question.
2. What are the different types of pre-rendering in Next.js?
» Answer: Next.js supports two forms of pre-rendering:
-
Static Generation (SSG): HTML is generated at build time.
-
Server-side Rendering (SSR): HTML is generated on each request.
Code Example (SSG withgetStaticProps):
3. How does Next.js handle routing?
» Answer: Next.js uses file-system based routing. Every file in the pages directory automatically becomes a route. Dynamic routes can be created using bracket notation.
Code Example (Dynamic Routing):
// pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post() {
const router = useRouter();
const { id } = router.query;
return <div>Post ID: {id}</div>;
}
4. Explain getStaticProps and its use cases.
» Answer: getStaticProps is a Next.js function used for static generation. It runs at build time and fetches data, passing it as props to the page. It’s ideal for pages with data that does not change often.
Code Example:
// pages/products.js
export async function getStaticProps() {
const products = await fetch('https://api.example.com/products').then(res => res.json());
return { props: { products } };
}
export default function Products({ products }) {
return (
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
);
}
5. What is getServerSideProps and when should you use it?
» Answer: getServerSideProps is used for server-side rendering. It runs on every request, allowing you to fetch data that needs to be up-to-date, such as user-specific data.
Code Example:
// pages/dashboard.js
export async function getServerSideProps(context) {
const user = await fetch('https://api.example.com/user', {
headers: { cookie: context.req.headers.cookie || '' }
}).then(res => res.json());
return { props: { user } };
}
export default function Dashboard({ user }) {
return <div>Welcome, {user.name}</div>;
}
6. What is getStaticPaths used for?
» Answer: getStaticPaths is used in combination with getStaticProps for dynamic routes. It generates a list of paths that need to be statically generated at build time.
Code Example:
// pages/blog/[slug].js
export async function getStaticPaths() {
const posts = await fetch('https://api.example.com/posts').then(res => res.json());
const paths = posts.map(post => ({ params: { slug: post.slug } }));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
return { props: { post } };
}
export default function BlogPost({ post }) {
return <article>{post.content}</article>;
}
7. How does Next.js implement API routes?
» Answer: Next.js allows you to create API endpoints by placing files under the pages/api directory. Each file maps to a route, and the default export is a function handling HTTP requests.
Code Example:
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Next.js API!' });
}
8. Explain the role of next/link in Next.js.
» Answer: next/link is a component for client-side transitions between routes, which improves performance by prefetching pages.
Code Example:
// components/Navigation.js
import Link from 'next/link';
export default function Navigation() {
return (
<nav>
<Link href="/"><a>Home</a></Link>
<Link href="/about"><a>About</a></Link>
</nav>
);
}
9. What is the purpose of next/router?
» Answer: next/router provides access to the router object, allowing navigation, route data, and programmatic routing.
Code Example:
// pages/redirect.js
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function Redirect() {
const router = useRouter();
useEffect(() => {
router.push('/');
}, []);
return <p>Redirecting...</p>;
}
10. How do you implement custom error pages in Next.js?
» Answer: You can create custom error pages by adding files such as pages/404.js for not found and pages/_error.js for general errors.
Code Example (404 Page):
// pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>;
}
11. What is the purpose of the next.config.js file?
» Answer: The next.config.js file is used for customizing your Next.js configuration. It can be used to set up environment variables, custom webpack configurations, and more.
Code Example:
12. Describe Incremental Static Regeneration (ISR).
» Answer: ISR allows you to update static content after build time without rebuilding the entire site. By using the revalidate property in getStaticProps, pages are regenerated in the background.
Code Example:
// pages/news.js
export async function getStaticProps() {
const news = await fetch('https://api.example.com/news').then(res => res.json());
return { props: { news }, revalidate: 60 }; // Revalidate every 60 seconds
}
export default function News({ news }) {
return (
<ul>
{news.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
13. How can you optimize images in Next.js?
» Answer: Next.js includes an Image component which automatically optimizes images by lazy-loading, resizing, and serving the appropriate format.
Code Example:
// pages/gallery.js
import Image from 'next/image';
export default function Gallery() {
return (
<div>
<Image src="/images/photo.jpg" alt="Sample" width={600} height={400} />
</div>
);
}
14. What are Custom App and Custom Document in Next.js?
Answer:
-
Custom App (
_app.js): Used to initialize pages, preserving state between route transitions. -
Custom Document (
_document.js): Used to augment the application's<html>and<body>tags.
Code Example (Custom App):
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
15. How do you handle CSS in Next.js?
» Answer: Next.js supports global CSS, CSS modules, and styled JSX. You can import global CSS in the custom App and use CSS modules for component-level styling.
Code Example (CSS Modules):
// components/Button.module.css
.button {
background-color: #0070f3;
color: white;
padding: 10px 20px;
}
// components/Button.js
import styles from './Button.module.css';
export default function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
16. What is the role of Environment Variables in Next.js?
» Answer: Environment variables are used to store sensitive data or configuration that may vary between deployments. Next.js allows you to access these variables using process.env as defined in your next.config.js or .env files.
Code Example (.env.local):
17. How does Next.js handle code splitting and bundle optimization?
» Answer: Next.js automatically splits your code by page, which means each page only loads the necessary JavaScript for that page. It also uses dynamic imports for further code splitting.
Code Example (Dynamic Import):
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
export default function Home() {
return (
<div>
<h1>Home Page</h1>
<DynamicComponent />
</div>
);
}
18. Can you explain the concept of “Static File Serving” in Next.js?
» Answer: Static files such as images, scripts, or other assets can be served from the public directory. They are accessible directly via the base URL.
Code Example:
// Access an image from /public/images/logo.png
export default function Logo() {
return <img src="/images/logo.png" alt="Logo" />;
}
19. What is middleware in Next.js and how can it be used?
» Answer: Middleware in Next.js can run code before a request is completed. It is useful for tasks like authentication, logging, and redirects. Starting with Next.js 12, you can add middleware by creating a middleware.js file at the root.
Code Example:
// middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
// Example: Redirect if not authenticated
if (!req.cookies.authToken) {
return NextResponse.redirect('/login');
}
return NextResponse.next();
}
20. How do you implement internationalization (i18n) in Next.js?
» Answer: Next.js supports i18n routing out of the box. You can configure supported locales in next.config.js and use built-in routing to manage locale-specific pages.
Code Example (next.config.js):
module.exports = {
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
},
};
21. What is a hybrid page in Next.js?
» Answer: A hybrid page in Next.js can use a combination of static generation and server-side rendering. For example, you may statically generate most of the page while using client-side fetching for parts of the data that update frequently.
Code Example:
See examples in questions 4 and 5.
22. How do you implement authentication in Next.js?
» Answer: Authentication in Next.js can be implemented using middleware for route protection, API routes for handling auth logic, or libraries like NextAuth.js.
Code Example (NextAuth.js setup):
// 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,
}),
],
});
23. How can you add SEO metadata to a Next.js page?
» Answer: You can add SEO metadata by using the Head component from next/head to inject meta tags, titles, and descriptions into the document head.
Code Example:
// pages/about.js
import Head from 'next/head';
export default function About() {
return (
<>
<Head>
<title>About Us</title>
<meta name="description" content="Learn more about our company." />
</Head>
<h1>About Us</h1>
</>
);
}
24. What is the difference between client-side and server-side navigation in Next.js?
» Answer: Client-side navigation (using next/link or next/router) avoids full page reloads, making transitions faster. Server-side navigation (direct URL access or refresh) loads the entire page from the server.
Code Example:
See the examples in questions 8 and 9 for client-side navigation.
25. How do you manage state in a Next.js application?
» Answer: State can be managed using React's built-in state management, Context API, or third-party libraries like Redux, Zustand, or Recoil. The approach depends on the complexity of the app.
Code Example (using React Context):
26. How can you improve performance in a Next.js application?
» Answer: Performance can be enhanced by using image optimization, code splitting, lazy loading components, caching data, and using ISR. Analyzing bundle sizes and optimizing third-party libraries is also crucial.
Code Example (Lazy Loading):
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
loading: () => <p>Loading...</p>,
});
export default function Home() {
return (
<div>
<h1>Welcome</h1>
<HeavyComponent />
</div>
);
}
27. What are some best practices for file structure in a Next.js project?
» Answer: Best practices include:
-
Keeping components and pages in separate directories.
-
Grouping related components.
-
Using the
publicfolder for static assets. -
Keeping API routes in
pages/api.
No specific code example is needed.
28. How do you handle errors in Next.js API routes?
» Answer: Error handling in API routes can be done using try-catch blocks, proper HTTP status codes, and custom error messages.
Code Example:
// pages/api/data.js
export default async function handler(req, res) {
try {
const data = await fetch('https://api.example.com/data').then(r => r.json());
res.status(200).json(data);
} catch (error) {
res.status(500).json({ error: 'Failed to load data' });
}
}
29. How do you integrate third-party libraries in a Next.js project?
» Answer: Third-party libraries can be integrated by installing via npm or yarn and importing them into your components or pages. Ensure libraries are compatible with SSR if needed.
Code Example (Integrating Axios):
// utils/api.js
import axios from 'axios';
const api = axios.create({
baseURL: process.env.API_URL,
});
export default api;
// pages/data.js
import api from '../utils/api';
export async function getServerSideProps() {
const { data } = await api.get('/data');
return { props: { data } };
}
export default function DataPage({ data }) {
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
30. How do you deploy a Next.js application?
» Answer: Next.js applications can be deployed on platforms like Vercel (the creators of Next.js), Netlify, AWS, or any Node.js hosting service. Vercel provides an optimized environment with zero configuration.
Code Example:
No code is necessary for deployment instructions, but here’s a basic vercel.json configuration:
{
"version": 2,
"builds": [{ "src": "package.json", "use": "@vercel/next" }]
}
Frequently Asked Questions (FAQs)
Like
Share
# Tags