nextjs-15

Implement Next.js 15 App Router patterns for scalable routing and data handling.

Updated Sep 6, 2024
One-click install
npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill nextjs-15-jaylaelike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-15
Source: https://github.com/Jaylaelike/pm25-interactive-thaipbs-app/tree/main/.claude/skills/nextjs-15
Command: npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill nextjs-15-jaylaelike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers implement Next.js 15 App Router patterns, including routing, server actions, and data fetching.

Core Features & Use Cases

  • App Router conventions: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route groups like (auth)/, and api/ route handlers.
  • Server Actions: demonstrate how to use server actions for forms and data mutations.
  • Data Fetching: parallel data fetching and streaming with Suspense in Next.js 15.

Quick Start

Set up a minimal Next.js 15 project with App Router, install dependencies, and start the dev server. Create app/layout.tsx, app/page.tsx, and a sample server action to observe routing and UI updates.

Frequently Asked Questions about nextjs-15

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

FAQPage Schema
How do I structure App Router file conventions in Next.js 15?

Next.js 15 App Router conventions use specific files like layout.tsx, page.tsx, loading.tsx, error.tsx, and not-found.tsx to manage routing, UI states, and errors. Route groups such as (auth)/ organize folders without affecting the URL path.

How do I handle form submissions and data mutations with Server Actions?

Server Actions handle form submissions and data mutations directly within server components. You define asynchronous functions to process form data on the server, eliminating the need for separate API endpoints.

What is the best way to fetch data in parallel using Next.js server components?

Parallel data fetching in Next.js server components allows multiple data requests to execute concurrently rather than sequentially. Wrapping these requests in Suspense boundaries enables streaming UI, rendering components as data resolves.

Can I use middleware and API route handlers with the Next.js App Router?

Yes, the App Router supports middleware usage and api/ route handlers. Route handlers allow you to create custom request endpoints, while middleware enables you to run code before a request completes.

What do I need to set up a minimal Next.js 15 project with App Router?

Setting up a minimal Next.js 15 project requires initializing the project, installing dependencies, and starting the dev server. You then create app/layout.tsx, app/page.tsx, and a sample server action to observe routing updates.