skills.rest
global-ministries
global-ministriesCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-fundamentals

Guide Next.js 13+ App Router migration and file-based routing conventions.

Updated Aug 17, 2025
Search Tags:#typescript#web development#react#routing#migration#nextjs#app router
One-click install
npx skills add https://github.com/global-ministries/global-connect --skill nextjs-app-router-fundamentals-global-ministries
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-fundamentals
Source: https://github.com/global-ministries/global-connect/tree/main/.agent/skills/nextjs-app-router-fundamentals
Command: npx skills add https://github.com/global-ministries/global-connect --skill nextjs-app-router-fundamentals-global-ministries

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides comprehensive guidance for Next.js App Router (Next.js 13+), simplifying the transition from the Pages Router and enabling efficient development of modern Next.js applications.

Core Features & Use Cases

  • Migration Assistance: Guides users migrating from Pages Router to App Router.
  • App Router Concepts: Explains routing, layouts, metadata, and special file conventions.
  • Use Case: You are starting a new Next.js project and need to understand how to structure your application using the App Router, including setting up layouts, pages, and dynamic routes.

Quick Start

Use the nextjs-app-router-fundamentals skill to understand how to create a new page in the app directory.

Frequently Asked Questions about nextjs-app-router-fundamentals

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

FAQPage Schema
How do I migrate from Next.js Pages Router to App Router?▼

Migrating to the Next.js App Router involves adopting new special file conventions and layout creation patterns within the app directory to transition your routing structure.

What are the special file conventions in Next.js App Router?▼

Next.js App Router special file conventions include specific files for routing, layouts, and metadata handling that define page structure without requiring manual configuration.

How do I create dynamic routes with generateStaticParams in Next.js 13?▼

Create dynamic routes in Next.js 13 by defining dynamic segments and exporting generateStaticParams to enable static site generation for those paths at build time.

When should I use Server Components in Next.js App Router?▼

Use Server Components in the Next.js App Router to fetch data directly and render HTML on the server by default, minimizing client-side JavaScript for modern web development.

Does Next.js App Router support TypeScript for routing and layouts?▼

Next.js App Router supports TypeScript for routing and layouts, providing type-safe file-based routing conventions and strongly typed metadata handling for robust web development.

How does metadata handling work in Next.js App Router?▼

Metadata handling in Next.js App Router works by exporting a metadata object from layout or page files, automatically generating the corresponding head tags for your application.

Related Skills

Explore More Software Engineering Skills→
sarimofficialsarimofficial

Next.js Development Skill

Designs, implements and optimizes Next.js 16+ apps with TypeScript, Tailwind CSS and App Router.

Community
Intermediate
hubeiqiaohubeiqiao

next-intl-setRequestLocale-ssg-fix

Call setRequestLocale before getMessages in Next.js server components for SSG.

Community
Intermediate
duyetduyet
5

react-nextjs-patterns

Implement React and Next.js patterns for server and client components.

Community
Intermediate
M-KolaczM-Kolacz

epic-routing

Automate Epic Stack routing configuration with React Router and react-router-auto-routes.

Community
Intermediate