jpesewang.work
HomeProjectsBlogContact
Back to Blog
From Build to Runtime: How to Optimize Every Layer of a Next.js App
Leif Le
October 13, 2025
20 min read

From Build to Runtime: How to Optimize Every Layer of a Next.js App

NextJS

Building a Next.js full-stack app is easier than ever — but building one that’s fast, scalable, and efficient is another story. As projects grow, performance bottlenecks, slow builds, and bloated APIs can creep in, hurting both user experience and developer productivity. In this guide, we’ll walk through the most effective optimization strategies for modern Next.js full-stack applications — from smarter data fetching and caching, to build optimization, image handling, and backend tuning. Whether you’re shipping to production or scaling for thousands of users, these best practices will help you keep your app lean, maintainable, and lightning-fast.

1. Optimize next-auth usage

instead of:

const { data: session } = useSession()

It triggers a call to /api/auth/session every time the page mounts.

✅ Fix: Provide session via SessionProvider at the root layout:

// app/layout.tsx
import { getServerSession } from "next-auth"
import { SessionProvider } from "next-auth/react"

export default async function RootLayout({ children }) {
const session = await getServerSession()
return (
<SessionProvider session={session}>
{children}
</SessionProvider>
)
}


2. Cache static API routes

For routes like /api/subjects, /api/semesters:

✅ Add response headers to cache results:

// /api/semesters/route.ts
export async function GET() {
const semesters = await getSemesters()
return Response.json(semesters, {
headers: {
"Cache-Control": "s-maxage=3600, stale-while-revalidate=86400"
}
})
}

OR, on the client, use SWR:

const { data: semesters } = useSWR("/api/semesters", fetcher, {
revalidateOnFocus: false,
dedupingInterval: 60000, // 1 min cache
})

This will make your app feel instant on navigation.


3. Reduce heavy DB queries

For routes like /api/tests/[id] or /api/test-attempts/[id]:

  1. Check if you’re loading unnecessary relations or fields.
  2. Use DB indexes for search/filter fields.
  3. Return minimal JSON — only what’s needed for the UI.

If using Prisma:

const test = await prisma.test.findUnique({
where: { id },
select: { id: true, title: true, duration: true } // no unnecessary joins
})

4. Regional optimization


Check if your database and Vercel region are close:

  1. If DB is in Singapore, set:
export const config = { regions: ['sin1'] }

  1. You can set this per API route for low-latency reads.

5. Combine redundant API calls

Instead of fetching /subjects, /semesters, /majors separately:

✅ Combine them in one endpoint:

// /api/initData
export async function GET() {
const [subjects, semesters, majors] = await Promise.all([
getSubjects(),
getSemesters(),
getMajors()
])
return Response.json({ subjects, semesters, majors })
}

6. Add global cache for auth

If your auth logic uses getSession() inside server components, wrap it in a helper:

import "server-only"
import { cache } from "react"

export const getCachedSession = cache(async () => {
return await getServerSession()
})

That ensures it’s fetched once per request, not per component.


1. Performance Optimization in Next.js

When asked in interviews, they usually want both framework-specific techniques and general web performance practices.

Phương pháp Tốc độ tải trang Cập nhật nội dung SEO Phù hợp với

SSG

🚀 Rất nhanh

❌ Cần build lại

✅ Tốt

Blog, tài liệu, trang giới thiệu

ISR

🚀 Rất nhanh

🔄 Cập nhật theo chu kỳ

✅ Tốt

Trang tin tức, danh sách sản phẩm

SSR

🕒 Chậm hơn

✅ Luôn cập nhật

✅ Tốt

Trang cá nhân hóa, dữ liệu thay đổi liên tục

A. Next.js-specific optimizations

  1. Static Site Generation (SSG) & Incremental Static Regeneration (ISR)
  2. Use getStaticProps / getStaticPaths when data changes rarely.
  3. ISR (revalidate) for periodic regeneration without rebuilding the whole site.
  4. Benefit: Reduces TTFB (Time To First Byte) and server load.
  5. Example:
ts
CopyEdit
export async function getStaticProps() {
const data = await fetchData()
return { props: { data }, revalidate: 60 }
}

  1. Server-Side Rendering (SSR) selectively
  2. Use getServerSideProps only when fresh data is absolutely required per request.
  3. Minimize SSR because it increases TTFB compared to SSG.
  4. Dynamic Imports (Code Splitting)
  5. Load heavy components only when needed.
const Chart = dynamic(() => import('../components/Chart'), { ssr: false })

  1. Image Optimization with next/image
  2. Automatically lazy-loads and serves responsive images in modern formats (WebP, AVIF).
jsx
CopyEdit
<Image src="/hero.jpg" alt="Hero" width={800} height={600} priority />

  1. Font Optimization with next/font
  2. Avoid blocking render by self-hosting fonts instead of loading from Google Fonts.
ts
CopyEdit
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

  1. Caching and CDN
  2. Leverage Vercel Edge Network or your CDN for static assets.
  3. Set appropriate cache-control headers.
  4. Bundle Analysis
  5. Use next-bundle-analyzer to see large packages and reduce dependencies.

npm install @next/bundle-analyzer

B. General performance best practices

  1. Reduce JavaScript payload (tree-shaking, remove unused code).
  2. Use React.memo / useCallback / useMemo for preventing unnecessary renders.
  3. Prefetch links (Next.js does this automatically with <Link />).
  4. Avoid unnecessary API calls — cache data where possible.
  5. Lazy-load below-the-fold content.

2. SEO Best Practices in Next.js

Interviewers usually want to see that you know both technical SEO and content-driven SEO.

A. Technical SEO in Next.js

  1. Use the metadata API (Next.js 13+) or next/head
  2. Add unique title, description, og:image, canonical tags.

import Head from 'next/head'

export default function Page() {
return (
<Head>
<title>My Page Title</title>
<meta name="description" content="My page description" />
<link rel="canonical" href="<https://example.com/page>" />
</Head>
)
}

  1. Clean URLs & Routing
  2. Use dynamic routes like /blog/[slug] instead of query params.
  3. Example: /blog/how-to-use-nextjs instead of /blog?id=123.
  4. Structured Data (Schema.org)
  5. Add JSON-LD for rich snippets.

<script type="application/ld+json">
{JSON.stringify({
"@context": "<https://schema.org>",
"@type": "Article",
headline: "My Blog Post",
datePublished: "2025-08-11",
})}
</script>

  1. Optimize Core Web Vitals
  2. Largest Contentful Paint (LCP)
  3. Cumulative Layout Shift (CLS)
  4. First Input Delay (FID)
  5. Use next/image and font optimization to help.
  6. SSR for SEO-critical pages
  7. For frequently updated pages (e.g., news, products), SSR ensures search engines see the latest content.
  8. XML Sitemap & robots.txt
  9. Generate via next-sitemap package.

B. Content & Accessibility for SEO

  1. Semantic HTML (<header>, <main>, <article>, <footer>).
  2. Proper heading hierarchy (h1 → h2 → h3).
  3. Alt text for images.
  4. Descriptive anchor text for links (avoid "click here").
  5. Mobile-friendly design (responsive layout).

3. How to Answer in an Interview

If they ask "How do you optimize performance and SEO in Next.js?", you can answer in this structured format:

"For performance, I first choose the right rendering strategy — SSG with ISR for static content, and SSR only when necessary. I also optimize bundle size with dynamic imports, use next/image for images, and cache assets via CDN. I monitor with the bundle analyzer and Core Web Vitals reports.
For SEO, I ensure every page has optimized meta tags, clean URLs, and structured data. I also prioritize accessibility, use semantic HTML, and generate sitemaps. For dynamic content, I leverage SSR so search engines can crawl up-to-date data."



Optimizing a Next.js full-stack project isn’t about chasing every millisecond — it’s about building a system that’s reliable, scalable, and easy to maintain over time.

By applying these best practices — efficient data fetching, smart caching, code splitting, and backend optimization — you ensure your app grows sustainably without sacrificing performance.

The key takeaway:

Performance is not a one-time task — it’s a mindset you build into every commit.

Keep measuring, profiling, and refining. The web is fast-moving, but a well-optimized Next.js app will always stay ahead of the curve 🚀.

Related Articles

TypeScript Best Practices for Large Applications

Essential TypeScript patterns and practices that will help you build maintainable applications.

Jan 5, 202410 min read

React Performance Optimization Techniques

Learn advanced techniques to optimize your React applications for better performance.

Dec 28, 202315 min read

Enjoyed this article?

Subscribe to get notified about new articles and updates.