AutoGineer
Generated banner for Nextjs App Router Patterns
Generated logo for Nextjs App Router Patterns

Nextjs App Router Patterns

Seth HobsonCommunityCreated by Seth Hobson

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
— the description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured reference for mastering the Next.js App Router. It covers essential architectural concepts including Server Components, Client Components, data fetching strategies, and routing conventions. It offers actionable patterns for implementing streaming, parallel routes, and Server Actions, helping developers transition from the Pages Router or build robust full-stack applications from the ground up.

What it does

  • Defines rendering modes for Server and Client components
  • Outlines standard file conventions for the App Router architecture
  • Provides patterns for data fetching and caching strategies
  • Demonstrates the use of Server Actions for secure mutations
  • Explains how to implement parallel and intercepting routes
  • Establishes best practices for performance and component structure

When to use it

  • When starting a new project using the Next.js App Router
  • When migrating an existing application from the Pages Router
  • When optimizing data fetching and implementing streaming UI
  • When building full-stack features using Server Actions
  • When needing guidance on component colocation and layout nesting

Advantages

  • Promotes a consistent architectural approach to Next.js development
  • Clarifies the boundary between server-side and client-side logic
  • Encourages performance-first patterns like streaming and ISR
  • Reduces common pitfalls by providing clear do's and don'ts

Usage examples

“How should I structure a page that needs to fetch data and show a loading state?”
The skill provides a pattern using Suspense boundaries and async Server Components to colocate data fetching, ensuring a smooth loading experience.
“What is the best way to handle form submissions in Next.js 14?”
It demonstrates the use of Server Actions, showing how to define server-side functions that handle mutations and revalidation securely.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/wshobson/nextjs-app-router-patterns/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip nextjs-app-router-patterns.zip -d .agents/skills

Documentation by Seth Hobson

Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

When to Use This Skill

  • Building new Next.js applications with App Router

  • Migrating from Pages Router to App Router

  • Implementing Server Components and streaming

  • Setting up parallel and intercepting routes

  • Optimizing data fetching and caching

  • Building full-stack features with Server Actions

Core Concepts

1. Rendering Modes
ModeWhereWhen to Use
Server ComponentsServer onlyData fetching, heavy computation, secrets
Client ComponentsBrowserInteractivity, hooks, browser APIs
StaticBuild timeContent that rarely changes
DynamicRequest timePersonalized or real-time data
StreamingProgressiveLarge pages, slow data sources
2. File Conventions
app/
├── layout.tsx       # Shared UI wrapper
├── page.tsx         # Route UI
├── loading.tsx      # Loading UI (Suspense)
├── error.tsx        # Error boundary
├── not-found.tsx    # 404 UI
├── route.ts         # API endpoint
├── template.tsx     # Re-mounted layout
├── default.tsx      # Parallel route fallback
└── opengraph-image.tsx  # OG image generation

Quick Start

// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: { default: 'My App', template: '%s | My App' },
  description: 'Built with Next.js App Router',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/page.tsx - Server Component by default
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  return res.json()
}

export default async function HomePage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Do's

  • Start with Server Components - Add 'use client' only when needed

  • Colocate data fetching - Fetch data where it's used

  • Use Suspense boundaries - Enable streaming for slow data

  • Leverage parallel routes - Independent loading states

  • Use Server Actions - For mutations with progressive enhancement

Don'ts

  • Don't pass serializable data - Server → Client boundary limitations

  • Don't use hooks in Server Components - No useState, useEffect

  • Don't fetch in Client Components - Use Server Components or React Query

  • Don't over-nest layouts - Each layout adds to the component tree

  • Don't ignore loading states - Always provide loading.tsx or Suspense

Files

LICENSE

MIT License

Copyright (c) 2024 Seth Hobson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs network access

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Seth Hobson
Publisher
Seth Hobson (Community)
Source
wshobson/agents · plugins/frontend-mobile-development/skills/nextjs-app-router-patterns · commit 4bde316
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Seth Hobson or Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download nextjs-app-router-patterns.zip