skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

pages-and-routing-guidelines

Guide adding SPA client routes with folder structure and registration.

Updated Mar 28, 2025
Search Tags:#frontend#routing#Next.js#navigation#router#SPA#code-organization
One-click install
npx skills add https://github.com/gileck/app-template-ai --skill pages-and-routing-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pages-and-routing-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/pages-and-routing-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill pages-and-routing-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to adding and managing SPA routes in a Next.js-based application, ensuring new routes are created, registered, and reflected in navigation consistently.

Core Features & Use Cases

  • Create route component folders under src/client/routes with a main component and index export.
  • Register new routes in src/client/routes/index.ts to enable navigation.
  • Update navigation items in src/client/components/NavLinks.tsx to reflect access control and routes.

Quick Start

Create a new route folder under src/client/routes, implement the route component, register it in src/client/routes/index.ts, and update the navigation in NavLinks.tsx accordingly.

Frequently Asked Questions about pages-and-routing-guidelines

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

FAQPage Schema
How do I add a new client route to a Next.js SPA?▼

To add a new SPA route, create a folder under src/client/routes, export the route component, register it in src/client/routes/index.ts, and update navigation items in NavLinks.tsx.

What is the folder structure for SPA routing in a Next.js application?▼

The SPA routing structure organizes route components under src/client/routes, registers them in src/client/routes/index.ts, and syncs navigation items in src/client/components/NavLinks.tsx.

Does SPA navigation sync require updating NavLinks.tsx manually?▼

Yes, SPA navigation sync requires updating navigation items in src/client/components/NavLinks.tsx to reflect new routes and apply public or admin access flags.

How does the SPA router architecture handle route persistence?▼

The SPA router architecture handles route persistence using RouterProvider and useUIStore, ensuring navigation state remains synchronized across the application.

Can I use route metadata to manage public and admin access in Next.js?▼

Yes, you can use route metadata to manage public and admin access by setting public/admin flags during route registration in src/client/routes/index.ts.

Related Skills

Explore More Software Engineering Skills→
duwenjiduwenji

spa-routes

Enforce React SPA route registration parity across desktop router config files.

Community
Intermediate
muddyrainmuddyrain
1

blog-resource-access-guard

Enforce blog and resource access controls with author fallback and return paths.

Community
Advanced
TanStackTanStack
14.9k

vue-router

Enable type-safe client-side routing in Vue apps with TanStack Router bindings.

Official
Advanced
gileckgileck

pages-and-routing-guidelines

Guide adding SPA client routes with folder structure and registration.

Community
Intermediate