Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Next.js 15 updates #65603

Merged
merged 70 commits into from
May 23, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
a64971c
Add PPR page
delbaoliveira May 9, 2024
a03ba9b
Reorder rendering section
delbaoliveira May 9, 2024
f02dbf9
Clean up, use consistent `experimental` titles
delbaoliveira May 9, 2024
8f09765
Document experimental_ppr
delbaoliveira May 9, 2024
f8d7b3b
Update ppr next.config.js page
delbaoliveira May 9, 2024
79b8b2b
Document unstable_after
delbaoliveira May 9, 2024
513c610
Add package bundling page
delbaoliveira May 10, 2024
66db9a2
Clean up, fix broken links
delbaoliveira May 10, 2024
c8da54f
Broken links
delbaoliveira May 10, 2024
20a8384
Missing p
delbaoliveira May 10, 2024
1748791
Fix links
delbaoliveira May 10, 2024
afb0d5d
Fix server actions example
delbaoliveira May 10, 2024
fae8c7e
Update mentions of `useFormStatus`
delbaoliveira May 10, 2024
827bce7
Review useOptimistic example
delbaoliveira May 10, 2024
13e7542
Review server actions page
delbaoliveira May 10, 2024
365fec4
Apply suggestions from code review
delbaoliveira May 10, 2024
abe69e2
Update docs/02-app/01-building-your-application/03-rendering/01-parti…
delbaoliveira May 10, 2024
75b92d7
`fetch` rework
delbaoliveira May 14, 2024
81eb834
Revamp caching and revalidating sections
delbaoliveira May 14, 2024
37e5f4c
Merge branch 'canary' into docs-iusd
manovotny May 20, 2024
68e6e55
Add React Compiler docs
delbaoliveira May 21, 2024
1b4b2a4
Apply suggestions from code review
delbaoliveira May 21, 2024
db58642
Apply package bundling feedback, add version history
delbaoliveira May 21, 2024
4b4a7b3
Merge branch 'docs-iusd' of https://github.com/vercel/next.js into do…
delbaoliveira May 21, 2024
161ed38
Add v15 upgrade guide (wip)
delbaoliveira May 21, 2024
a4ada6a
PPR polish
delbaoliveira May 21, 2024
cf6dc83
Update fetch api docs
delbaoliveira May 21, 2024
fd0dc91
Revamp data fetching section (wip)
delbaoliveira May 21, 2024
327b1bc
update Data Cache and Client-side Router cache doc section
May 21, 2024
6d212a5
Update docs/02-app/02-api-reference/04-functions/unstable_after.mdx
anthonyshew May 21, 2024
61e7a2d
Update docs/02-app/01-building-your-application/02-data-fetching/01-f…
anthonyshew May 21, 2024
0c68ef0
Update docs/02-app/01-building-your-application/02-data-fetching/01-f…
anthonyshew May 21, 2024
57f3689
update route handler docs
May 21, 2024
3097485
Update docs/02-app/01-building-your-application/02-data-fetching/01-f…
anthonyshew May 21, 2024
e266fd7
Update docs/02-app/01-building-your-application/02-data-fetching/01-f…
anthonyshew May 21, 2024
b20a69d
Update docs/02-app/01-building-your-application/02-data-fetching/01-f…
anthonyshew May 21, 2024
7457a83
Merge branch 'docs-iusd' of https://github.com/vercel/next.js into do…
May 21, 2024
d4f7f83
First batch of broken links.
anthonyshew May 21, 2024
f360451
Merge branch 'canary' into docs-iusd
StephDietz May 21, 2024
13617ae
Merge branch 'docs-iusd' of https://github.com/vercel/next.js into do…
anthonyshew May 21, 2024
1810717
First batch of broken links.
anthonyshew May 21, 2024
b540554
Undo sanity example.
anthonyshew May 21, 2024
642aaba
Second batch of broken links.
anthonyshew May 21, 2024
00a170d
More broken links.
anthonyshew May 21, 2024
96dcc67
Testing link...
anthonyshew May 21, 2024
ccce593
Bring it back.
anthonyshew May 21, 2024
4b652ea
Move it to separate lines?
anthonyshew May 21, 2024
fa08dbb
Maybe...?
anthonyshew May 21, 2024
7d36013
This is right?
anthonyshew May 21, 2024
2c04502
lmao
anthonyshew May 21, 2024
8a32697
Update docs/02-app/02-api-reference/05-next-config-js/ppr.mdx
manovotny May 22, 2024
4ae5aa2
Merge branch 'canary' into docs-iusd
delbaoliveira May 22, 2024
2876f00
Review route handlers docs
delbaoliveira May 22, 2024
9d11925
Rework client-side router cache docs
delbaoliveira May 22, 2024
2299916
Add note for fetchCache = 'default-cache' for root layout
delbaoliveira May 22, 2024
0e7e013
fix `after` import
ztanner May 22, 2024
641f705
Condense good to know
manovotny May 23, 2024
03f91f4
Apply suggestions from code review
manovotny May 23, 2024
4434f72
Update docs/02-app/01-building-your-application/02-data-fetching/03-s…
manovotny May 23, 2024
e442464
Split package.json and gitignore sentenses
manovotny May 23, 2024
85f45d6
Adds Tailwind globals
manovotny May 23, 2024
b4f89c6
reword
manovotny May 23, 2024
378ae0b
React compiler
manovotny May 23, 2024
1531fe9
Valid root layout
manovotny May 23, 2024
17720eb
Explicit update commands
manovotny May 23, 2024
d4b0f85
Update upgrade guide and metadata
delbaoliveira May 23, 2024
78b0471
speed insights
manovotny May 23, 2024
f840fc0
Update rc command
manovotny May 23, 2024
0c8fc2f
fix "before" blocks for serverComponentsExternalPackages & bundlePage…
ztanner May 23, 2024
4007608
lint
ztanner May 23, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,30 @@ bun add next@15.0.0-rc react@rc react-dom@rc eslint-config-next@15.0.0-rc

[`fetch` requests](/docs/app/api-reference/functions/fetch) are no longer cached by default.

To opt all `fetch` requests in a route into caching, you can use the `export const fetchCache = 'default-cache'` [segment config option](/docs/app/api-reference/file-conventions/route-segment-config).
To opt specific `fetch` requests into caching, you can pass the `cache: 'force-cache'` option.

```js filename="app/layout.js"
// Since this is the root layout, all fetch requests in the app will be cached.
export const fetchCache = 'default-cache'
export default async function RootLayout() {
const a = await fetch('https://...') // Not Cached
const b = await fetch('https://...', { cache: 'force-cache' }) // Cached

export default function RootLayout() {
// ...
}
```

To opt specific `fetch` requests into caching, you can pass the `cache: 'force-cache'` option.
To opt all `fetch` requests in a layout or page into caching, you can use the `export const fetchCache = 'default-cache'` [segment config option](/docs/app/api-reference/file-conventions/route-segment-config). If individual `fetch` requests specify a `cache` option, that will be used instead.

```js filename="app/layout.js"
// Since this is the root layout, all fetch requests in the app
// that don't set their own cache option will be cached.
export const fetchCache = 'default-cache'

```js filename="app/page.js"
fetch('https://...', { cache: 'force-cache' })
export default async function RootLayout() {
const a = await fetch('https://...') // Cached
const b = await fetch('https://...', { cache: 'no-store' }) // Not cached

// ...
}
```

## Route Handlers
Expand Down Expand Up @@ -95,3 +104,37 @@ import { Inter } from '@next/font/google'
// After
import { Inter } from 'next/font/google'
```

## bundlePagesRouterDependencies

`experimental.bundlePagesExternals` is now stable and renamed to `bundlePagesRouterDependencies`.

```js filename="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
// Before
bundlePagesExternals: true,
ztanner marked this conversation as resolved.
Show resolved Hide resolved

// After
bundlePagesRouterDependencies: true,
}

module.exports = nextConfig
```

## serverExternalPackages

`experimental.serverComponentsExternalPackages` is now stable and renamed to `serverExternalPackages`.

```js filename="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
// Before
serverComponentsExternalPackages: ['package-name'],
ztanner marked this conversation as resolved.
Show resolved Hide resolved

// After
serverExternalPackages: ['package-name'],
}

module.exports = nextConfig
```
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export default function Icon() {
> - By default, generated icons are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [dynamic functions](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) or uncached data.
> - You can generate multiple icons in the same file using [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
> - You cannot generate a `favicon` icon. Use [`icon`](#icon) or a [favicon.ico](#favicon) file instead.
> - App icons are special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.

### Props

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@ This section of the docs covers **Metadata file conventions**. File-based metada
Each file convention can be defined using a static file (e.g. `opengraph-image.jpg`), or a dynamic variant that uses code to generate the file (e.g. `opengraph-image.js`).

Once a file is defined, Next.js will automatically serve the file (with hashes in production for caching) and update the relevant head elements with the correct metadata, such as the asset's URL, file type, and image size.

> **Good to know**: Special Route Handlers like [`sitemap.ts`](/docs/app/api-reference/file-conventions/metadata/sitemap), [`opengraph-image.tsx`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), and [`icon.tsx`](/docs/app/api-reference/file-conventions/metadata/app-icons), and other [metadata files](/docs/app/api-reference/file-conventions/metadata) are cached by default.
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ Add or generate a `manifest.(json|webmanifest)` file that matches the [Web Manif

Add a `manifest.js` or `manifest.ts` file that returns a [`Manifest` object](#manifest-object).

> Good to know: `manifest.js` is special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.

```ts filename="app/manifest.ts" switcher
import type { MetadataRoute } from 'next'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ Generate a route segment's shared image by creating an `opengraph-image` or `twi
>
> - By default, generated images are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [dynamic functions](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) or uncached data.
> - You can generate multiple Images in the same file using [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
> - `opengraph-image.js` and `twitter-image.js` are special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.

The easiest way to generate an image is to use the [ImageResponse](/docs/app/api-reference/functions/image-response) API from `next/og`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ Sitemap: https://acme.com/sitemap.xml

Add a `robots.js` or `robots.ts` file that returns a [`Robots` object](#robots-object).

> **Good to know**: `robots.js` is a special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.

```ts filename="app/robots.ts" switcher
import type { MetadataRoute } from 'next'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ For smaller applications, you can create a `sitemap.xml` file and place it in th

You can use the `sitemap.(js|ts)` file convention to programmatically **generate** a sitemap by exporting a default function that returns an array of URLs. If using TypeScript, a [`Sitemap`](#returns) type is available.

> **Good to know**: `sitemap.js` is a special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.

```ts filename="app/sitemap.ts" switcher
import type { MetadataRoute } from 'next'

Expand Down