new-page

Scaffold Next.js App Router pages with optional session checks and metadata.

13|5|Updated May 18, 2024
One-click install
npx skills add https://github.com/techdiary-dev/techdiary.dev --skill new-page-techdiary-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/techdiary-dev/techdiary.dev/tree/main/.claude/skills/new-page
Command: npx skills add https://github.com/techdiary-dev/techdiary.dev --skill new-page-techdiary-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds and bootstraps a Next.js App Router page with optional server-side session checks, SEO metadata, and a reusable layout, speeding up initial page creation.

Core Features & Use Cases

  • Create a server-component page structure by default with a lean page.tsx.
  • Add optional session protection using getSession and redirect to the home page.
  • Auto-generate SEO metadata via generateMetadata for dynamic content.

Quick Start

Provide the route path and protection type, then generate the page.tsx and optional metadata scaffolding.

Frequently Asked Questions about new-page

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

FAQPage Schema
How do I scaffold a Next.js App Router page with server-side session checks?

To scaffold a Next.js App Router page with session checks, define a route path and protection type. The generator creates a server-component page.tsx using getSession from src/backend/services/session.actions, redirecting unauthenticated users to the home page.

How do I add dynamic SEO metadata to a Next.js App Router page?

Add dynamic SEO metadata to a Next.js App Router page by using the generateMetadata function. This scaffolding process auto-generates the metadata structure within page.tsx to handle route-specific SEO requirements for dynamic content.

How does redirecting unauthenticated users work in Next.js App Router sessions?

Redirecting unauthenticated users works by calling getSession within the server component. If the session check fails, the Next.js App Router automatically redirects the user to the root path to prevent unauthorized access to protected routes.

Can I generate both protected and public routes with Next.js App Router scaffolding?

Yes, you can generate both protected and public routes with Next.js App Router scaffolding. By specifying the protection type during setup, you control whether the page.tsx includes the getSession logic or remains a lean public server component.

What is the best way to structure a Next.js App Router page for dynamic content?

The best way to structure a Next.js App Router page for dynamic content is using a default server-component structure. This lean page.tsx approach supports optional session protection and integrates generateMetadata for route-specific SEO.