> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/react/next/preapprouter/routing.md).
# Pages
Pages are associated with a route based on their **file name**. For example, in development:
* `pages/index.js` is associated with the `/` route.
* `pages/posts/first-post.js` is associated with the `/posts/first-post` route.
* `pages/event/[id].js` for dynamic routes(see below)
* `pages/404.js` for custom 404 and \[other errors]\([Error Pages](https://nextjs.org/docs/advanced-features/custom-error-page#404-page))
### [Link](https://nextjs.org/docs/api-reference/next/link)
```jsx
import Link from 'next/link'; //must have a tag inside
export default function FirstPost() {
return (
<>
First Post
About us
{post.title}
About us
)
}
```
**Yes that is all you need no imports, it somehow auto imports React and such**
Next.js automatically **prefetches** the code for the linked page in the background.
#### Outer Component
Next.js specific top-level `App` component
Can keep state when navigating between pages, add global styles, etc
/pages/\_app.js
```jsx
import "../styles/global.css";
export default function App({ Component, pageProps }) {
return
}
```
*Must restart dev server after adding \_app.js*
#### Layouts
Use regular react components
### [Head](https://nextjs.org/docs/api-reference/next/head)
```jsx
import Head from "next/head";
export default function Home() {
return (
Create Next App
)
}
```
### [Page Path Depends on External Data](https://nextjs.org/docs/routing/dynamic-routes)
Routes like `/post/[id]`
1. Create a \[] in the filename to indicate dynamic pages in Next.js
2. Create file with[ `getStaticPaths` ](https://nextjs.org/docs/basic-features/data-fetching#fallback-pages)and `getStaticProps`
pages/posts/\[id].js
```jsx
import Layout from '../../components/layout'
export default function Post() {
return ...
}
//prod build time, dev every request
export async function getStaticPaths() {
// Returns an array that looks like this:
// [
// {
// params: {
// id: 'ssg-ssr'
// }
// },
// {
// params: {
// id: 'pre-rendering'
// }
// }
// ]
//If fallback is false, then any paths not returned by getStaticPaths will result in a 404 page.
return {paths, fallback: false};
}
export async function getStaticProps({ params }) {
// Fetch necessary data for the blog post using params.id
}
```
### Linking
```jsx
...
```
### Catch-all Routes
`pages/posts/[...id].js` matches `/posts/a`, but also `/posts/a/b`, `/posts/a/b/c` and so on.
```jsx
function getStaticPaths() {
//..
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c']
}
}
//...
]
}
export async function getStaticProps({ params }) {
// params.id will be like ['a', 'b', 'c']
}
```
## Router
If you want to access the Next.js router, you can do so by importing the `useRouter` hook from `next/router`. Take a look at our [router documentation](https://nextjs.org/docs/routing/dynamic-routes) to learn more.
## Redirecting Link permantely
In `next.config.js`
```js
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: '/',
permanent: true,
},
]
},
}
```
### Redirecting in JS
```jsx
import { useRouter } from 'next/router'
function ActiveLink({ children, href }) {
const router = useRouter()
const handleClick = (e) => {
e.preventDefault()
router.push(href)
router.push('/post/[pid]', '/post/abc')
}
return (
{children}
)
}
export default ActiveLink
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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/preapprouter/routing.md?ask=
```
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.