What is Next.js?

React alone only handles UI components.

• Next.js adds:

  • Routing out of the box → no need to install React Router.

  • Server-Side Rendering (SSR) → pages can be rendered on the server before sending to the browser.

  • Static Site Generation (SSG) → pages can be pre-rendered as static HTML at build time.

  • API Routes → you can write backend code (like small APIs) inside your Next.js project.

  • Built-in optimizations → for images, fonts, and SEO.

In short: Next.js = React + Routing + SSR/SSG + API routes + Performance goodies.

1) Difference from CRA (Create React App)

a) Server-Side Rendering (SSR)

CRA: Everything is rendered in the browser. Search engines initially see an empty <div id="root"></div> until JavaScript loads → not great for SEO.

• Next.js: You can render pages on the server before sending to the browser → the page arrives already filled with content → faster first load and better SEO.

b) API Routes

• CRA: Needs a separate backend (Node/Express, PHP, etc.).

• Next.js: Has /pages/api folder → write server-side code directly in your Next.js app (no extra server needed).

c) SEO

• CRA: Poor by default because pages are client-rendered → bots may not see full content immediately.

• Next.js: Excellent → pages can be pre-rendered or server-rendered, so search engines get full HTML instantly.

2) Hybrid Rendering in Next.js (SSR, SSG, ISR)

Next.js is flexible—you don’t have to choose just one rendering method. You can mix and match per page.

a) SSR (Server-Side Rendering)

• What: Page is generated on the server at request time (every visit).

• When to use: Data changes on every request (e.g. user dashboard, stock prices).

• How: getServerSideProps()

• Pros: Always fresh data.

• Cons: Slower because page is rebuilt on every request.

b) SSG (Static Site Generation)

• What: Page is generated once at build time → served as static HTML.

• When to use: Content doesn’t change often (e.g. blog, landing page).

• How: getStaticProps()

• Pros: Super fast, CDN-friendly.

• Cons: Data is only as fresh as the last build.

c) ISR (Incremental Static Regeneration)

• What: Like SSG, but allows pages to update after deployment without a full rebuild.

• When to use: Mostly static pages that occasionally need updates (e.g. product pages).

• How: getStaticProps({ revalidate: 10 }) → rebuild page every 10 seconds if visited.

• Pros: Fast like SSG + updated like SSR.

• Cons: A bit more complex setup.

Quick Analogy

• CRA: Like cooking everything at the table when guests arrive → slower but always fresh.

• Next.js SSG: Like cooking once and serving pre-packed meals → super fast but not updated unless you cook again.

• Next.js SSR: Like cooking fresh for every guest → tasty but slower.

• Next.js ISR: Like cooking once, but occasionally refreshing the meal automatically → best of both worlds.