Next.js Static Content Builder

What it does

This skill generates safe and usable HTML content within Next.js projects configured for static export. It specifically addresses common issues encountered when using template literals in TypeScript code destined for static generation, such as preventing errors caused by unescaped shell variables and ensuring proper expansion of array methods like map(). The resulting HTML is ready to be incorporated directly into your Next.js application's pages.

When to use it

• Generating dynamic content at build time: You need to create HTML pages with data fetched during the build process, but want to avoid runtime errors related to string manipulation.
• Including environment variables in static assets: You require values from your .env file to be safely embedded within generated HTML files.
• Working with complex template literals: Your Next.js project utilizes intricate template literal structures that need pre-processing for correct rendering.
• Ensuring consistent output across deployments: You want to guarantee the same HTML content is served regardless of environment or deployment context.

Key capabilities

• Prevents errors in TypeScript template literals during static export.
• Handles shell variable escaping within strings.
• Pre-expands map() and other array methods used inside templates.
• Generates valid HTML suitable for Next.js pages.

Example prompts

• "Generate the HTML content for my /about page, incorporating data from siteConfig.json."
• "Safely expand this template literal: <div>Hello, ${process.env.NEXT_PUBLIC_SITE_NAME}</div>"
• “Pre-expand this array of items and generate an HTML list.”

Tips & gotchas

This skill requires a Next.js project configured for static export (next export). It is designed to work with TypeScript code; JavaScript usage may require adaptation.