# App Router

Recommended instead of pages approach in v13

In `/app`:

* **Folders** are used to define routes
  * \[][`page.js` file](https://nextjs.org/docs/app/building-your-application/routing/pages) in that folder makes route segments accessible
  * Can colocate components, stylesheets, and images
  * [layouts](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#layouts) in `layout.ts` show UI that is shared across multiple routes. If multiple layouts apply, they do nested wrapping
  * `app/blog/[slug]/page.tsx` for dynamic slug
  * `app/blog/[...slug]/page.tsx` for catch all slug ie `/blog/a/b` and slug is list
* A route group(folder that doesn't affect path) can be created by wrapping a folder's name in parenthesis: `(folderName)`

app/page.tsx

```tsx
export default function Page() {
  return <h1>Hello, Home page!</h1>
}
```

app/blog/\[slug]/page.tsx

```tsx
export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

//optional, prerender the dynamic routes 
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
```

### Linking

Link component recommended and provides prefetching

```tsx
import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}
```

Programmatically

```tsx
'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
```

Server components programmatically

```tsx
import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }: { params: { id: string } }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/react/next/routing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.