skills.rest
MattSenter
MattSenterCOMMUNITY
Explore all skills by this author →
Website𝕏@MattSenterGitHub

senternet-site-nextjs-setup

Scaffolds a Next.js App Router TypeScript site configured for Firebase App Hosting.

Updated May 8, 2026
Search Tags:#typescript#next.js#scaffold#seo#app router#turborepo#firebase app hosting
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-nextjs-setup-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-nextjs-setup
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-nextjs-setup
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-nextjs-setup-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a Next.js marketing site for Firebase App Hosting involves many interlocking pieces — route manifests, sitemap and robots generation, security headers, environment variables, and monorepo configuration — that are easy to get wrong or leave inconsistent. ## Core Features & Use Cases - Project Scaffolding: Runs create-next-app with TypeScript, Tailwind CSS v4, and the App Router, then adds the config files later skills depend on. - SEO Infrastructure: Creates a single route manifest in config/routes.mjs that drives app/sitemap.ts and app/robots.ts so indexable pages stay in sync. - App Hosting Configuration: Writes apphosting.yaml with scaling, environment variables, and secrets, plus Turborepo setup for monorepo workspaces. - Use Case: You need a server-rendered marketing site with route handlers and metadata per page, deployed to Firebase App Hosting with a connected GitHub branch. ## Quick Start Ask the assistant to scaffold a new Next.js TypeScript marketing site for Firebase App Hosting on a chosen local dev port.

Frequently Asked Questions about senternet-site-nextjs-setup

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

FAQPage Schema
How do I set up a Next.js site for Firebase App Hosting?▼

Run create-next-app with TypeScript, Tailwind, and the App Router, then add an apphosting.yaml file defining scaling and environment variables. Connect a GitHub repo so App Hosting deploys rollouts from pushes to the linked branch.

When should I use Next.js instead of Vite for a marketing site?▼

Use Next.js only when the site needs server rendering, route handlers, middleware, or on-demand regeneration. For a purely static marketing site, the Vite track is cheaper and faster to build and host.

Does Firebase App Hosting support Next.js monorepos?▼

Yes, but workspaces alone are not enough — the repo needs a supported monorepo tool such as Turborepo. Keep one lockfile at the repo root, place apphosting.yaml in the app directory, and set the backend rootDir to the app path.

Why are my Next.js environment variables undefined in the browser?▼

Browser-read variables must be prefixed with NEXT_PUBLIC_ and listed in apphosting.yaml with BUILD availability. Values only in .env.production are missing in deployed builds unless mirrored in apphosting.yaml.

Why should I avoid output: 'export' in next.config for App Hosting?▼

Static export disables route handlers, middleware, image optimization, and ISR, which are the reasons to use the Next.js track. App Hosting expects the default .next build output with server rendering intact.

Related Skills

Explore More Software Engineering Skills→
get-convexget-convex
9

convex-self-hosting

Configure Convex static self-hosting with deployment scripts and framework-specific routes.

Official
Advanced
minh1609minh1609

firebase-hosting-basics

Configure and deploy Firebase Hosting for static web apps and SPAs.

Community
Intermediate
Charles5277Charles5277

nuxt-seo

Configure Nuxt SEO with robots, sitemap, OG images, and schema.org data.

Community
Advanced
theslashdojotheslashdojo

hosting

Deploy static content to Firebase Hosting with preview channels and rewrites.

Official
Advanced