Next.js — App Router, Folder Structure, Rendering and Full Stack with SQL Server

In short: Code that runs before a request is routed — redirects, rewrites, authentication gates, A/B testing, adding headers, localisation — configured with a matcher.

• It should be fast and must not be the only security check; validate access again in pages, actions and route handlers.

In short: Pages render to full HTML on the server (static or dynamic), so crawlers see content immediately;

• the Metadata API and generateMetadata set titles, descriptions, canonical URLs and Open Graph tags;
• file conventions generate sitemap.xml, robots.txt and OG images;
• next/image and next/font improve Core Web Vitals;
• clean URLs from file routing.

In short: Pages Router uses pages/, getServerSideProps/getStaticProps, _app/_document and API routes; every component is a client component.

• App Router uses app/, nested layouts, React Server Components, streaming, Server Actions, route handlers and the Metadata API, with fetch/caching integrated.
• New projects use the App Router; both can coexist for incremental migration.

In short: Hydration attaches React's event handlers and state to server-rendered HTML in the browser.

• Errors happen when the client's first render differs from the server HTML — using Date.now()/random values, window/localStorage during render, locale-dependent formatting, invalid HTML nesting, or browser extensions modifying the DOM.
• Fix by rendering client-only values in useEffect, consistent formatting, or suppressHydrationWarning for intentional differences.

In short: The route or fetch is statically generated or cached (build-time rendering, revalidate, "use cache", cached fetch).

• Trigger on-demand revalidation (revalidatePath/revalidateTag/updateTag) after mutations, lower the revalidate interval, or make the route dynamic if it must always be fresh (reading cookies/headers or connection()).

In short: Environment variables set in the Vercel project for the right environment;

• the database firewall allows Vercel's outbound IPs (or use Azure SQL with public access rules / private networking);
• encrypt: true and valid certificates (no trustServerCertificate against a misconfigured server);
• the route runs on the Node.js runtime (not Edge);
• connection limits from many serverless instances (small pools);
• region latency.

In short: <Link> performs client-side navigation — it fetches only the new route's payload, keeps layouts mounted and prefetches linked routes in the viewport — so navigation is fast without full page reloads.

• A plain <a> causes a full browser navigation.
• Use <Link> for internal links and <a> for external ones.

In short: Server-only variables in .env.local/hosting settings are read via process.env.X on the server.

• Variables prefixed NEXT_PUBLIC_ are inlined into client bundles at build time — never put secrets there.
• Different files per environment (.env.development, .env.production); validate them at startup (zod).