App router

UpdatedMarch 21, 2026

•1 min read

App router

OGASAWARA KAKERU

NextJS's App Router is a modern framework built on React Server Components that centrally manages file-based routing, layouts, and data fetching within the app/ directory. It is faster than the traditional Pages Router, makes server-side rendering the default, and enables more efficient SPA/MPA development.

Key Features and Benefits of App Router

・Advanced routing: The folder structure under the app/ directory corresponds to URL paths. Define screens in page.tsx and common layouts in layout.tsx.

・Nested layouts: Layouts can be nested by folder, enabling efficient reuse of common UI elements.

・Improved data fetching: Data can be fetched directly within components using async/await. The fetch API has been extended to support powerful caching and revalidation.

・Simplified UI management: Simply placing loading.tsx (loading UI) and error.tsx (error handling) applies Suspense and Error Boundaries.

Server Components vs Client Components

・Server Components (.tsx): Default. Runs on the backend. Can access databases and APIs directly.

・Client Components (“use client”;): Used when interactivity (useState, useEffect, event listeners) is required

#nextjs #web-development #frontend-development

3 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Next.js ~Server and Client Components~

By default, layouts and pages are Server Components, which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need intera

Jun 16, 20263 min read

Next.js ~Server and Client Components~

Next.js ~What is the React Server Component (RSC) Payload~

The React Server Component is a specialized, compact binary data format used by Next.js to transfer the rendered result of Server Components from the server to the client. What is inside the RSC Paylo

Jun 4, 20262 min read

Next.js ~What is the React Server Component (RSC) Payload~

Next.js ~Meta data~

Next.js(App Router) generates metadata that can be used for SEO or SNS sharing by exporting a meta object or generateMetadata functionality from layout.tsx or page.tsx.Unlike the traditional pages dir

May 27, 20263 min read

Next.js ~Meta data~

Next.js ~cache~

The cache in Next.js is a system that improves the performance of rendering results and data requests. The latest versions of Next.js (Next.js 15, 16) have shifted from automatically caching everythin

May 19, 20262 min read

Next.js ~cache~

Next.js ~streaming~

Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from t he server to the client as they become ready. By stream, you c

May 10, 20269 min read

Next.js ~streaming~

K

Kkr's NetxJS-Blog

17 posts

App router