skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-ssg

Scaffold, configure, and debug Next.js 16 App Router projects with static export.

Updated Mar 29, 2026
Search Tags:#typescript#next.js#pnpm#app router#ssg#static export#generatestaticparams
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill nextjs-ssg-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-ssg
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/nextjs-ssg
Command: npx skills add https://github.com/r-senchuk/agentskills --skill nextjs-ssg-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Setting up a Next.js 16 project for fully static export involves many failure points: missing generateStaticParams, incompatible server-only APIs, async params migration, and misconfigured next.config.ts. This Skill provides a verified procedure to scaffold, configure, and validate static Next.js sites so pnpm build reliably produces correct output in out/. ## Core Features & Use Cases - Project Scaffolding: Create a new Next.js 16 project with TypeScript, Tailwind, ESLint, App Router, and pnpm using the correct flags. - Static Export Configuration: Set output: 'export', trailingSlash, and images.unoptimized in next.config.ts, including next-intl plugin wrapping. - Dynamic Route Handling: Implement generateStaticParams for locale, slug, and catch-all segments with Next.js 16 async params conventions. - Build Debugging: Diagnose common failures like missing generateStaticParams, ISR incompatibility, and server-only API usage. - Use Case: You need a marketing site deployed to static hosting. Use this Skill to scaffold the project, configure static export with localized routes, and verify the out/ directory contains all expected HTML files. ## Quick Start Scaffold a new Next.js 16 project configured for static export with TypeScript and Tailwind, then verify the build output in the out directory.

Frequently Asked Questions about nextjs-ssg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Next.js for static export?▼

Set output: 'export', trailingSlash: true, and images.unoptimized: true in next.config.ts. Run pnpm build and verify the out/ directory contains HTML files for every route and locale.

How to use generateStaticParams with dynamic routes in Next.js?▼

Export a generateStaticParams function from every dynamic segment such as [locale] or [slug], returning an array of param objects. For nested segments, flatMap over locales and slugs to produce all combinations.

Why does Next.js static export fail with missing generateStaticParams?▼

With output: 'export', every dynamic route segment must export generateStaticParams so the build knows which pages to prerender. Add the function to each [locale], [slug], or catch-all page and rebuild.

Does Next.js static export support ISR or middleware?▼

No. ISR revalidate exports, middleware, Server Actions, cookies(), headers(), and Draft Mode are incompatible with output: 'export'. Use full rebuilds for content changes and handle locale routing with a [locale] segment.

How do async params work in Next.js 16 page components?▼

In Next.js 16, params is a Promise, so page components must be async and await it: const { locale } = await params. The old synchronous params object from Next.js 14 no longer works.

Can I use next-intl with Next.js static export?▼

Yes. Wrap your config with createNextIntlPlugin() in next.config.ts and place all routes under an app/[locale]/ segment whose layout renders the html and body tags. Each locale page still needs generateStaticParams.

Related Skills

Explore More Software Engineering Skills→
aaronbassettaaronbassett
4

dev-specialisms:init-local-tooling

Initialize linting, formatting, type checking, and testing tooling across TypeScript, Rust, and Python projects.

Community
Advanced
renderincrenderinc

render-static-sites

Deploy static frontends to Render's global CDN with TLS and PR previews.

Official
Intermediate
OpenClaudiaOpenClaudia
674

i18n

Implements next-intl internationalization with locale routing, hreflang sitemaps, and bulk translation for Next.js projects.

Official
Advanced
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate