Getting Started with Next.js App Router

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

Let's try App Router, available since Next.js 13.

Next.js uses file-system routing, so an application's routes are determined by its file structure.

App Router supports features such as Server Components, Server Actions, and Suspense.

This post covers its basic usage.

Setting up the root page 🔗

You can configure the root route (/) with the page.tsx and layout.tsx files in the generated app/ directory.

app/layout.tsx

export default function RootLayout({children,}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>{children}</body> 
	{/* html, body 태그를 사용하여 레이아웃을 구성*/}
	{/* children은 page.tsx 내부의 컴포넌트를 받아서 레이아웃을 구성한다. */}
    </html>
  )
}

app/page.tsx

export default function Page() {
	return <p>Root Page</p>
}

👨‍💻

Even without a

layout.tsx

file, Next.js automatically generates a layout when it starts.

Start the app with npm run dev, then visit http://localhost:3000/↗ to see Root Page.

Defining routes 🔗

As mentioned earlier, Next.js uses file-system routing, so routes are determined by the file and folder structure.

Create a subdirectory under app/ to define a route.

app/example/page.tsx

export default function ExamplePage() {
	return <p>Example Page</p>
}

Start the app with npm run dev, then visit http://localhost:3000/example↗ to see Example Page.

Dynamic routes 🔗

Define a dynamic route by using square brackets in the folder name.

app/example/[slug]/page.tsx

export default function SlugPage({ params }: { params: { slug: string } }) {
	return <p>{params.slug} Page</p>
}

Start the app with npm run dev, then visit http://localhost:3000/example/hello↗ to see hello Page.

API routing with route handlers 🔗

Create an app/api/ directory to use API routing.

app/api/hello.ts

import { NextResponse } from "next/server";
 
export async function GET() {
  return NextResponse.json({ message: "Hello World" });
}

Start the app with npm run dev, then visit http://localhost:3000/api/hello↗ to see {"message":"Hello World"}.

🖐️

A route.ts file cannot exist at the same route as a page.tsx file.

References 🔗

Next.js official documentation↗

Getting Started with Next.js App Router | PromleeBlog