What is Next.js?

What Next.js adds to React

• Routing from the folder structure: a file at app/pricing/page.tsx becomes /pricing.
• Rendering on the server, at build time or per request, so the first HTML contains the content.
• React Server Components, which run on the server and send less JavaScript to the browser.
• Route handlers for API endpoints next to the pages.
• Metadata APIs for titles, descriptions and Open Graph tags per route.
• Image, font and script optimization.

Rendering modes

• Static: pages built once at build time. Fastest, ideal for marketing pages and docs.
• Dynamic: rendered on each request, for personalised or frequently changing pages.
• Incremental: static pages refreshed in the background after a set time or on demand.
• Client components: interactive parts that run in the browser, inside server-rendered pages.

Before you launch

• Give every route its own metadata: title, description and canonical. Duplicated titles across routes are a common template mistake.
• Remove the X-Powered-By header, which announces the framework:

// next.config.js
module.exports = { poweredByHeader: false };

• Check environment variables. Only variables prefixed NEXT_PUBLIC_ are sent to the browser, so never give a secret that prefix.
• Add a sitemap and robots file, which Next.js can generate from app/sitemap.ts and app/robots.ts.
• Configure security headers in next.config or middleware.
• Keep Next.js updated. Framework security fixes are released regularly.

A secret placed in a NEXT_PUBLIC_ variable is shipped to every visitor's browser. Rename it and rotate the key.

Hosting

Vercel supports every Next.js feature out of the box. Netlify, Railway, Render, Cloudflare and self-hosting on Node.js or Docker also work, with some features depending on the platform's adapter.

What a scan can and cannot tell you

WebAuditOS checks whether the X-Powered-By header is still sent, compares served and rendered content, checks for duplicate titles and canonical-link presence across eligible routes, and reviews security headers including CSP.

It does not read your code, check your Next.js version for known vulnerabilities or see which variables reach the client bundle.

Duplicate titles across many routes in a Next.js app usually mean metadata is set once in the root layout and never overridden.

Short answers

Is Next.js frontend or backend? Both. It renders pages and can run server code and APIs.

Is Next.js free? Yes, it is open source. Hosting may cost money.

Do I need Vercel to use Next.js? No, though Vercel supports it most completely.

Is Next.js good for SEO? Yes. Server rendering gives crawlers full HTML.