mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Delba de OliveiraandGitHub
98c3076eb4
This PR document the caching semantics in Next.js, how they interact, and what APIs affect them. We're also taking the opportunity to consolidate terminology, remove duplicate content, and update sections of the docs that relate to caching.
### Documentation
- [x] Create a new section for caching
- [x] Explain how the different caching mechanisms work
- [x] Request Memoization (React Cache)
- [x] Persistent Data Cache
- [x] Persistent Full Route Cache
- [x] In-memory, client-side Router Cache
- [x] Document how different APIs affect caching
- [x] Document cache interactions
- [x] Clean up stale information in the other docs sections
- [x] Routing Section
- [x] Move advanced navigation topics from fundamentals to **How Navigation Works** section
- [x] Rewrite the **How Navigation Works** section
- [x] Rendering Section
- [x] Simplify fundamentals page
- [x] Rewrite the **Static and Dynamic Rendering** pages
- [ ] ~Create a page to explain how **Client and Server Components** are rendered~. Moved to this PR: https://github.com/vercel/next.js/pull/51579
- [x] Data fetching section
- [x] Consolidate data fetching story for fetching, caching, and revalidating
- [x] Clarify data fetching story with 3rd party libraries and React `cache`
- [x] Create **Data Fetching Patterns** page
- [x] Document other related behaviors:
- [x] Update information on scroll position for back/forward navigation
- [x] Remove the concepts of **soft and hard navigation**
- [x] Remove the concepts of **static and dynamic data fetching**
- [x] Use consistent terminology **runtime** 👉🏼 **request time**. Runtime for Edge and Node.js, request time to describe when dynamic stuff happens
- [x] `generateStaticParams` being able to seed the Full Route Cache
- [x] Polish 💅🏼
---
### Related PRs:
- Diagrams: https://github.com/vercel/front/pull/24142
- Redirects: https://github.com/vercel/front/pull/24179
166 lines
3.4 KiB
Plaintext
166 lines
3.4 KiB
Plaintext
---
|
|
title: Absolute Imports and Module Path Aliases
|
|
description: Configure module path aliases that allow you to remap certain import paths.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
<details>
|
|
<summary>Examples</summary>
|
|
|
|
- [Absolute Imports and Aliases](https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports)
|
|
|
|
</details>
|
|
|
|
Next.js has in-built support for the `"paths"` and `"baseUrl"` options of `tsconfig.json` and `jsconfig.json` files.
|
|
|
|
These options allow you to alias project directories to absolute paths, making it easier to import modules. For example:
|
|
|
|
```tsx
|
|
// before
|
|
import { Button } from '../../../components/button'
|
|
|
|
// after
|
|
import { Button } from '@/components/button'
|
|
```
|
|
|
|
> **Good to know**: `create-next-app` will prompt to configure these options for you.
|
|
|
|
## Absolute Imports
|
|
|
|
The `baseUrl` configuration option allows you to import directly from the root of the project.
|
|
|
|
An example of this configuration:
|
|
|
|
```json filename="tsconfig.json or jsconfig.json"
|
|
{
|
|
"compilerOptions": {
|
|
"baseUrl": "."
|
|
}
|
|
}
|
|
```
|
|
|
|
```tsx filename="components/button.tsx" switcher
|
|
export default function Button() {
|
|
return <button>Click me</button>
|
|
}
|
|
```
|
|
|
|
```jsx filename="components/button.js" switcher
|
|
export default function Button() {
|
|
return <button>Click me</button>
|
|
}
|
|
```
|
|
|
|
```tsx filename="app/page.tsx" switcher
|
|
import Button from 'components/button'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<h1>Hello World</h1>
|
|
<Button />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/page.js" switcher
|
|
import Button from 'components/button'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<h1>Hello World</h1>
|
|
<Button />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Module Aliases
|
|
|
|
In addition to configuring the `baseUrl` path, you can use the `"paths"` option to "alias" module paths.
|
|
|
|
For example, the following configuration maps `@/components/*` to `components/*`:
|
|
|
|
```json filename="tsconfig.json or jsconfig.json"
|
|
{
|
|
"compilerOptions": {
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/components/*": ["components/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```tsx filename="components/button.tsx" switcher
|
|
export default function Button() {
|
|
return <button>Click me</button>
|
|
}
|
|
```
|
|
|
|
```jsx filename="components/button.js" switcher
|
|
export default function Button() {
|
|
return <button>Click me</button>
|
|
}
|
|
```
|
|
|
|
```tsx filename="app/page.tsx" switcher
|
|
import Button from '@/components/button'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<h1>Hello World</h1>
|
|
<Button />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/page.js" switcher
|
|
import Button from '@/components/button'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<h1>Hello World</h1>
|
|
<Button />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
Each of the `"paths"` are relative to the `baseUrl` location. For example:
|
|
|
|
```json
|
|
// tsconfig.json or jsconfig.json
|
|
{
|
|
"compilerOptions": {
|
|
"baseUrl": "src/",
|
|
"paths": {
|
|
"@/styles/*": ["styles/*"],
|
|
"@/components/*": ["components/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
// pages/index.js
|
|
import Button from '@/components/button'
|
|
import '@/styles/styles.css'
|
|
import Helper from 'utils/helper'
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<Helper>
|
|
<h1>Hello World</h1>
|
|
<Button />
|
|
</Helper>
|
|
)
|
|
}
|
|
```
|