主站 Developer ToolsNext.js App Router

Next.js App Router

Name: Next.js App Router
Author: ngxtm

File-system routing, Layouts, and Route Groups.

4 Stars0 Installs更新于 189 days agoMIT

Priority: P0 (CRITICAL)

Use the App Router (app/ directory) for all new projects.

File Conventions

page.tsx: The UI for a route.
layout.tsx: Shared UI wrapping children. Persists across navigation.
template.tsx: Similar to layout, but remounts on navigation.
loading.tsx: Suspense boundary for loading states.
error.tsx: Error boundary (Must be Client Component).
not-found.tsx: Custom 404 UI.
route.ts: Server-side API endpoint.

Structure Patterns

Route Groups: Use parenthesis (auth) to organize routes without affecting URL path.
- app/(auth)/login/page.tsx -> /login
Private Folders: Use underscore _lib to exclude folders from routing.
Dynamic Routes: Use brackets [slug].
- app/blog/[slug]/page.tsx -> /blog/abc
Catch-all: [...slug] matches subsequent segments.

Navigation

Link Component: Use <Link href="/dashboard"> for prefetching.
Programmatic: Use useRouter hook (Client Components only).
- router.push('/dashboard')
Redirect: Use redirect('/login') in Server Components.

Best Practices

Colocation: Keep component files, styles, and tests inside the route folder.
Layouts: Use Root Layout (app/layout.tsx) for <html> and <body> tags.

安装指令

npx skills add ngxtm/Next.js App Router

下载解压包

下载 skill.zip

下载完整 Skill 目录，包含 SKILL.md 及所有相关文件

信息

Authorngxtm

Categorydeveloper

Version@main

Last Updated189 days ago

LicenseMIT

在 GitHub 中查看

Related Skills

local-places

Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.

246,840·openclaw

github

Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.

246,840·openclaw

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

246,840·openclaw

voice-call

Start voice calls via the OpenClaw voice-call plugin.

246,840·openclaw

notion

Notion API for creating and managing pages, databases, and blocks.

246,840·openclaw

gemini

Gemini CLI for one-shot Q&A, summaries, and generation.

246,840·openclaw

Category:developer

主站 Developer ToolsNext.js App Router

Next.js App Router

File-system routing, Layouts, and Route Groups.

4 Stars0 Installs更新于 189 days agoMIT

Priority: P0 (CRITICAL)

Use the App Router (app/ directory) for all new projects.

File Conventions

page.tsx: The UI for a route.
layout.tsx: Shared UI wrapping children. Persists across navigation.
template.tsx: Similar to layout, but remounts on navigation.
loading.tsx: Suspense boundary for loading states.
error.tsx: Error boundary (Must be Client Component).
not-found.tsx: Custom 404 UI.
route.ts: Server-side API endpoint.

Structure Patterns

Route Groups: Use parenthesis (auth) to organize routes without affecting URL path.
- app/(auth)/login/page.tsx -> /login
Private Folders: Use underscore _lib to exclude folders from routing.
Dynamic Routes: Use brackets [slug].
- app/blog/[slug]/page.tsx -> /blog/abc
Catch-all: [...slug] matches subsequent segments.

Navigation

Link Component: Use <Link href="/dashboard"> for prefetching.
Programmatic: Use useRouter hook (Client Components only).
- router.push('/dashboard')
Redirect: Use redirect('/login') in Server Components.

Best Practices

Colocation: Keep component files, styles, and tests inside the route folder.
Layouts: Use Root Layout (app/layout.tsx) for <html> and <body> tags.

安装指令