Next.js Answers

Basic Next.js Answers

#	Question	Answer	Examples
1	What is Next.js?	A React framework for building production-ready web applications	Enables server-side rendering (SSR), static site generation (SSG), etc.
2	Why use Next.js?	Improves performance, SEO, developer experience; provides built-in features	SSR, SSG, file-system routing, API routes, image optimization
3	How do you create a new Next.js project?	Using the create-next-app command	npx create-next-app@latest my-app
4	What is file-system routing in Next.js?	Routes are automatically created based on the file structure in the pages directory	pages/about.js maps to the /about route
5	What is the pages directory?	Contains the components that represent different routes in your application	pages/index.js is the homepage (/)
6	What is the <Link> component?	Enables client-side navigation between pages without a full page reload	<Link href="/about">About</Link>
7	What is the <Image> component?	Optimizes images for performance (automatic resizing, lazy loading)	<Image src="/my.jpg" alt="My image" width={500} height={500} />
8	What is Server-Side Rendering (SSR)?	Renders the page on the server for each request	Using getServerSideProps in a page component
9	What is Static Site Generation (SSG)?	Pre-renders pages at build time	Using getStaticProps and getStaticPaths in a page component
10	What is getServerSideProps?	Fetches data on the server for each request for SSR	export async function getServerSideProps(context) { ... }
11	What is getStaticProps?	Fetches data at build time for SSG	export async function getStaticProps(context) { ... }
12	What is getStaticPaths?	Used with getStaticProps to define which paths should be pre-rendered	export async function getStaticPaths() { ... } (for dynamic routes like [id])
13	What are API Routes?	Allows you to create API endpoints within your Next.js project	pages/api/hello.js (export default function handler(req, res) { ... })
14	How do you navigate programmatically?	Using the useRouter hook from next/router	import { useRouter } from 'next/router'; const router = useRouter(); router.push('/dashboard');
15	What is the useRouter hook?	Provides access to the router object and navigation methods	import { useRouter } from 'next/router'; const router = useRouter();

Intermediate Next.js Answers

#	Question	Answer	Examples
1	What is the difference between SSR and SSG?	SSR renders on each request; SSG renders at build time	SSR for dynamic content that changes frequently; SSG for static content that doesn't change often.
2	What is Incremental Static Regeneration (ISR)?	Allows SSG pages to be regenerated after deployment without a full rebuild	Using the props: { revalidate: 60 } option in getStaticProps
3	What is the _app.js file?	Used to initialize the application (e.g., global CSS, state providers)	function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; }
4	What is the _document.js file?	Used to customize the initial server-rendered HTML document (, , )	class MyDocument extends Document { render() { ... } }
5	What are CSS Modules?	CSS files scoped locally to a component, preventing naming conflicts	import styles from './MyComponent.module.css'; <button className={styles.button}>...</button>;
6	How do you use global CSS?	Importing a CSS file in _app.js	import '../styles/globals.css';
7	How do you handle environment variables?	Using .env files (.env.local, etc.), accessing them via process.env	NEXT_PUBLIC_API_URL=https://api.example.com; process.env.NEXT_PUBLIC_API_URL
8	What is the NEXT_PUBLIC prefix?	Variables prefixed with NEXT_PUBLIC are exposed to the client-side	NEXT_PUBLIC_API_URL is available in both server-side and client-side code.
9	What is Code Splitting in Next.js?	Automatic code splitting based on pages and dynamic imports (next/dynamic)	Loads only the JavaScript needed for the current page/component.
10	What is next/dynamic?	Allows dynamic imports of React components, enabling better code splitting	const DynamicComponent = dynamic(() => import('../MyComponent'));
11	What is Fast Refresh?	A feature in Next.js that preserves component state when code changes are made	Provides instant feedback without losing application state.
12	What is client-side routing in Next.js?	Navigating between pages without a full browser page reload	Using the component or useRouter hook
13	How do you fetch data client-side?	Using useEffect with fetch or libraries like SWR, React Query	useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []);
14	What is next/middleware?	Allows you to intercept requests before a Next.js page is rendered	import { NextResponse } from 'next/server';
15	What is the export option for next build?	Exports pages as static HTML files (useful for deployment)	export const prerender = true; in pages/index.js

Advanced Next.js Answers

#	Question	Answer	Examples
1	What is Middleware in Next.js?	Functions that run before a request is completed, allowing modifications, redirects, authentication, etc.	export function middleware(request) { ... }
2	How do you use Middleware for authentication?	Check for a token or session in the request and redirect if not valid	if (request.nextUrl.pathname.startsWith('/admin')) { return NextResponse.redirect(new URL('/login', request.url)); }
3	What are Edge Functions?	Serverless functions that run at the edge (closer to the user) for lower latency	Can be used for Middleware, API Routes, or specific Edge features.
4	What are Server Components (Next.js 13+)?	Components that render only on the server, allowing access to server resources (databases, FS)	export async function ServerComponent() { const data = await fetchFromServer(); return <div>{data.name}</div>; }
5	What are Client Components (Next.js 13+)?	Components that render on the client, allowing use of state, effects, and browser-specific APIs	'use client'; export function ClientComponent() { const [count, setCount] = useState(0); ... }
6	What is the difference between Server and Client Components?	Server components render on the server, no JS bundle sent; Client components render on the client, JS bundle sent.	Use Server for data fetching, backend logic; Use Client for interactive UI, state management.
7	What is the App Router (Next.js 13+)?	A new routing system based on the app directory, using Server Components and Layouts	app/page.js, app/layout.js, app/dashboard/page.js
8	What are Layouts in the App Router?	UI structure shared across multiple pages	app/layout.js (export default function RootLayout({ children }) { return <html><body>{children}</body></html> })
9	What are Server Actions (Next.js 13+)?	Allows executing server-side code directly from Client Components or form submissions	'use server'; export async function createItem(formData) { ... }
10	How do you optimize performance in Next.js?	Use SSR/SSG/ISR, Code Splitting, Image Optimization, Lazy Loading, Caching, Profiling	next/image, next/dynamic, React.memo, React DevTools.
11	How do you handle authentication in Next.js?	Using libraries like next-auth or implementing custom solutions with API Routes	Using OAuth providers (Google, GitHub, etc.), managing sessions.
12	What is next-auth?	A popular library for handling authentication in Next.js applications	Provides providers, session management, and callbacks
13	What is the difference between Next.js and Gatsby?	Next.js is a full-stack framework (SSR, SSG); Gatsby is primarily focused on SSG and GraphQL	Choose based on project needs for SSR vs. SSG and ecosystem requirements.
14	How do you deploy a Next.js application?	Using platforms like Vercel (recommended), Netlify, AWS, Google Cloud, Heroku	Vercel offers seamless integration and optimized deployments.
15	What is next.config.js?	Configuration file for customizing Next.js behavior	module.exports = { reactStrictMode: true, images: { domains: ['example.com'] } };