> 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
```