Static Site Development with Next.js

Differences between SSR, SSG, and ISR. Why SSG matters for performance and SEO.

Scaffold a project, understand folder structure, and run dev server.

Create static routes and understand the file-system-based router.

Learn the foundation of static rendering with data fetching at build time.

Use slugs and generate paths for blogs, portfolios, and documentation pages.

Rebuild only updated pages post-deployment with revalidation.

CSS Modules, Tailwind, and styled-components explained and implemented

Create shared layout wrappers and design systems for static websites.

Use <Image> component for responsive and lazy-loaded images.

Parse .md and .mdx files to build blogs, docs, and content-driven sites

Generate blog routes, render posts with remark, highlight code, and paginate.

Use Contentful or Sanity for external content, fetched at build time.

Add meta tags, Open Graph data, and structured data with next/head

📝 Automatically create SEO files using next-sitemap.

Use semantic HTML, skip links, and test with Lighthouse.

Define redirects, rewrites, and middleware for edge delivery.

Bundle splitting, caching strategies, and lazy loading.

Integrate Google Analytics, Plausible, or Posthog with statically generated pages.

Connect GitHub, enable preview branches, and monitor builds.

Export static HTML with next export and host anywhere.

Automate deployment from GitHub with environment variables and preview builds.