Next.js interviews have changed.
A few years ago, many interview questions focused on file-based routing, server-side rendering, static generation, and how Next.js differed from Create React App.
Today, a mid-level Next.js developer is expected to understand much more than pages and components.
Modern Next.js development includes:
- App Router
- Server Components
- Client Components
- Caching
- Metadata
- Route Handlers
- Middleware
- Authentication
- SEO
- Performance
- Deployment
- Production architecture
This article isn't meant to help you memorize answers.
It's designed to help you understand what interviewers are actually evaluating. If you can explain these concepts clearly, you'll sound like someone who has built production applications—not someone who has only followed tutorials.
1. What is Next.js, and why do developers use it?
Next.js is a React framework for building production-ready web applications. React provides the UI layer, while Next.js adds the application structure around it.
It includes routing, rendering strategies, layouts, API routes, image optimization, metadata handling, caching, middleware, and deployment-friendly patterns.
A strong answer should explain that developers choose Next.js because it helps build fast, SEO-friendly, scalable applications with React.
2. What is the App Router in Next.js?
The App Router is the modern routing system in Next.js.
It is based on the app directory and supports:
- Layouts
- Nested routes
- Loading states
- Error boundaries
- Route Handlers
- Server Components
- Streaming
Routes are created using folders and page.tsx files.
For example:
app/blogs/page.tsx
creates the blogs page, while
app/blogs/[slug]/page.tsx
creates a dynamic blog page.
The App Router changes how developers think about layouts, rendering, and data fetching.
3. What is the difference between Server Components and Client Components?
Server Components render on the server.
They can:
- Fetch data directly
- Access server-only resources
- Reduce JavaScript sent to the browser
Client Components run inside the browser.
Use them when you need:
- State
- Effects
- Event handlers
- Browser APIs
- Local storage
- Interactive UI
A good default rule is:
Keep components as Server Components unless they genuinely require client-side interactivity.
4. When should you use "use client"?
Use "use client" whenever a component needs browser-side behavior.
Examples include:
- Dropdowns
- Modals
- Tabs
- Interactive forms
- Theme toggles
- Charts
- Drag and drop
or hooks such as:
useStateuseEffect
Don't add "use client" everywhere.
Doing so increases the JavaScript bundle and can negatively affect performance.
5. What is static rendering?
Static rendering means a page is generated ahead of time and served from cache.
It's ideal for pages whose content rarely changes, such as:
- Blogs
- Landing pages
- Documentation
- Portfolio pages
- Marketing pages
Static pages are usually faster because they don't need to be regenerated for every request.
6. What is dynamic rendering?
Dynamic rendering generates a page on each request.
Use it when content depends on:
- Authentication
- Cookies
- Headers
- Search parameters
- Frequently changing data
Typical examples include:
- Dashboards
- Admin panels
- User accounts
- Personalized feeds
Choosing the correct rendering strategy is more important than always choosing one over another.
7. What is ISR in Next.js?
ISR stands for Incremental Static Regeneration.
It allows a static page to regenerate after a specified interval without rebuilding the entire application.
It's useful for:
- Blogs
- Product pages
- Service pages
- Portfolio websites
ISR combines the performance of static pages with periodically refreshed content.
8. How does caching work in Next.js?
Next.js includes multiple caching layers, particularly in the App Router.
Caching can occur at:
- The
fetch()level - The route level
- The rendering level
Examples:
- Blog pages are usually cached.
- Dashboards are typically dynamic.
- Pricing pages may use revalidation.
- Checkout pages require careful handling because of user-specific data.
Interviewers often ask this question because it demonstrates whether you understand performance versus freshness trade-offs.
9. What is generateMetadata()?
generateMetadata() creates dynamic metadata for pages.
It's especially useful for:
- Blogs
- Services
- Products
- Projects
Each page can generate its own:
- Title
- Description
- Canonical URL
- Open Graph image
- Twitter metadata
Good SEO depends on more than content—metadata also matters.
10. How do you handle 404 pages in dynamic routes?
Use notFound() from:
next/navigation
If a resource doesn't exist, return a proper 404 rather than causing a 500 error.
Remember:
- 404 → Resource doesn't exist
- 500 → Server failure
Search engines treat these differently.
11. What are Route Handlers?
Route Handlers allow backend endpoints inside the app directory.
Common use cases include:
- Contact forms
- Webhooks
- Authentication callbacks
- Email sending
- AI endpoints
- File uploads
They support methods such as:
GETPOSTPUTDELETE
Production APIs should also validate input and return appropriate HTTP status codes.
12. What is Middleware in Next.js?
Middleware runs before a request completes.
Common uses include:
- Authentication
- Redirects
- Localization
- A/B testing
- Route protection
Middleware should remain lightweight.
Heavy database work generally belongs elsewhere.
13. What is the difference between layout.tsx and page.tsx?
page.tsx defines the actual page.
layout.tsx wraps pages with shared UI.
For example, an admin dashboard layout may include:
- Sidebar
- Navbar
while each dashboard page renders inside that layout.
Layouts reduce duplication and improve navigation.
14. What is loading.tsx used for?
loading.tsx defines the loading UI for a route segment.
Next.js automatically displays it while that route is loading.
This improves perceived performance because users receive immediate visual feedback.
15. What is error.tsx used for?
error.tsx provides an error boundary for a route segment.
Instead of crashing the whole application, only the affected section displays an error interface.
This is especially valuable for dashboards, payment flows, and data-heavy pages.
16. How do you optimize images in Next.js?
Use the next/image component.
Best practices include:
- Accurate width and height
- Meaningful
alttext - Lazy loading
-
priorityonly for above-the-fold images
Using priority everywhere can actually reduce performance.
17. How do you improve SEO in a Next.js application?
Important SEO practices include:
- Unique titles
- Meta descriptions
- Canonical URLs
- Open Graph images
- Structured data
- XML sitemap
- robots.txt
- Internal linking
- Clean URLs
- Proper heading structure
For dynamic pages, avoid reusing identical metadata across every page.
18. How do you secure Route Handlers?
Protect Route Handlers by:
- Validating input
- Authenticating users
- Authorizing actions
- Protecting secrets
- Using environment variables correctly
- Rate limiting sensitive endpoints
- Returning proper status codes
Remember:
- Authentication → Who is the user?
- Authorization → What can they do?
19. How do environment variables work in Next.js?
Environment variables are stored in files such as:
.env.local
or configured on the deployment platform.
Variables beginning with:
NEXT_PUBLIC_
are exposed to the browser.
Never expose:
- Database credentials
- Payment secrets
- Email API keys
- Private tokens
using NEXT_PUBLIC_.
20. What is the best way to structure a production Next.js application?
A production project should separate:
- Routes
- Components
- Utilities
- Services
- Validation
- Actions
- Database logic
- Types
- Shared configuration
There's no single perfect folder structure.
The objective is maintainability.
21. How should forms be handled in Next.js?
Forms can use:
- Client Components
- Server Actions
- Route Handlers
Every production form should include:
- Validation
- Loading state
- Error state
- Success state
- Server-side verification
Client-side validation alone isn't enough.
22. What are Server Actions?
Server Actions execute server-side logic directly from components or forms.
They're useful for:
- Creating records
- Updating data
- Processing submissions
They still require:
- Validation
- Error handling
- Permission checks
Running on the server doesn't automatically make them secure.
23. How do you improve performance in a Next.js application?
Performance improvements include:
- Prefer Server Components
- Minimize Client Components
- Optimize images
- Cache public data
- Lazy-load heavy UI
- Reduce third-party scripts
- Optimize database queries
- Keep JavaScript bundles small
Performance should be measured from the user's perspective—not only by Lighthouse scores.
24. How do you handle authentication in Next.js?
Authentication can be implemented using:
- Auth.js
- Custom sessions
- OAuth providers
- JWTs
- External authentication services
Production applications should support:
- Login
- Logout
- Session expiration
- Protected routes
- Secure cookies
- Role-based permissions
- Server-side authorization
Hiding a button in the UI isn't security.
Sensitive operations must always be protected on the server.
25. What makes someone a mid-level Next.js developer?
A mid-level developer understands much more than page creation.
They understand:
- Rendering
- Routing
- Caching
- Metadata
- Forms
- Authentication
- Backend boundaries
- SEO
- Performance
- Deployment
More importantly, they can explain why they made technical decisions.
Understanding trade-offs separates production experience from tutorial knowledge.
Final Thoughts
Next.js has become one of the most important frameworks for modern full-stack development.
Today's interviews focus less on memorizing APIs and more on understanding how the framework works in real production environments.
If you're preparing for a mid-level Next.js interview, study the concepts, understand the trade-offs, and practice explaining your decisions clearly.
That's what interviewers are really evaluating.
Frequently Asked Questions
Is Next.js good for full-stack development?
Yes. Next.js supports frontend pages, server rendering, Route Handlers, forms, metadata, caching, authentication flows, and deployment-friendly architecture, making it a strong choice for many full-stack applications.
Should I learn the App Router or the Pages Router?
For new projects, focus on the App Router. The Pages Router is still used in older applications, but the App Router is the future of Next.js.
Are Server Components required?
Not for every component, but understanding them is essential for modern Next.js development and interviews.
What should a mid-level Next.js developer know?
They should understand routing, layouts, Server Components, Client Components, data fetching, caching, metadata, Route Handlers, forms, authentication, SEO, performance, and deployment fundamentals.
Top comments (1)
The transition to the App Router completely changed how we structure React UI components. When evaluating mid-level devs, the biggest tell is how they handle the boundary between Server and Client Components. If they just slap
"use client"on a top-level layout to avoid refactoring their state or context providers, they have completely missed the architecture's core performance benefit. A strong candidate knows exactly how to push that interactivity as far down the component tree as possible.