## Improving Documentation
Updated the doc to reflect the API signature of `cacheTag`, which takes
one or more string values.
---------
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
## Improving Documentation
Updated the `Dashboard` component to be an `async` function to properly
`await` the session verification process. This change ensures that the
user role is retrieved correctly from `session` before rendering the
component.
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
### What?
Fix the signatures of `useMDXComponents`.
### Why?
The `useMDXComponents` function is always called without any arguments.
It’s also always supposed to be a named export, not a default export.
It’s also called during render. Defining React components during render
is an anti-pattern. All components that were previously defined inside
of `useMDXComponents`, are now defined outside of the function.
### How?
Manual fixes.
---------
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: Joseph <sephxd1234@gmail.com>
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
## What?
Rename `experimental.dynamicIO` to `experimental.cacheComponents` across
the Next.js codebase.
## Why?
We're going to be merging the functionality of the `ppr`, `dynamicIO`
and `useCache` experimental flags into the singular `cacheComponents`
flag to reduce complexity of the codebase and simplify adoption for
users wanting to experiment with experimental features.
## How?
- Renamed the configuration option from `experimental.dynamicIO` to
`experimental.cacheComponents`
- Added deprecation handling with automatic migration for the old option
name
- Updated all documentation, tests, and internal references
- Updated Rust code in SWC transforms and Turbopack
- Maintained backward compatibility with deprecation warnings
NAR-158
## What?
Adds support for `remarkPlugins: ['remark-gfm']` and `rehypePlugins:
['rehype-slug']`.
Previously you had to nest an array like `remarkPlugins:
[['remark-gfm']]` but that's a bug, that case is only for passing
options. Directly passing the string without options should be allowed.
This PR implements that.
### What?
Updated the documentation to clarify that App Router requires manual
locale handling through dynamic route segments and middleware, with
examples showing how to implement i18n redirects correctly.
### Why?
The App Router doesn't use the i18n configuration in next.config.js like
the Pages Router does.
Closes NEXT-
Fixes#81227
---------
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Co-authored-by: Joseph <sephxd1234@gmail.com>
What?
This PR updates the Page component example in
05-server-and-client-components.mdx to use Promise-based params as
recommended in the Next.js 15 documentation.
Why?
Next.js 15 introduced support for async props, allowing the params prop
to be a Promise in Server Components. Updating the documentation ensures
that users follow the latest recommended practices and avoid confusion
when working with dynamic routes in Next.js 15.
How?
- Changed the Page component example to accept params as a Promise and
use await params to destructure the id.
- Updated the type annotation accordingly.
### What?
Currently the docs is incorrectly suggesting to type the PostCSS config
with types from Tailwind CSS. This pull request removed the wrong types.
If desired one can correctly type the config with the
[`postcss-load-config`](https://github.com/postcss/postcss-load-config/blob/main/src/index.d.ts#L52-L60)
package:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
}
export default config
```
However if your package manager does not hoist the package, you need to
install it separately just for the types, which does not seem to be
worth it.
### Why?
### How?
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Fix misleading information in the docs about mixing cached and uncached
`fetch` calls during dynamic rendering.
### Why?
I followed the guide (using Next.js 15.3.2) and tried it out with this
code:
```ts
const joke = await fetch("https://api.chucknorris.io/jokes/random", {
cache: "no-cache",
});
const jokeData = await joke.json();
console.log("Fetched joke:", jokeData.value);
const joke2 = await fetch(
"https://api.chucknorris.io/jokes/random?category=dev"
);
const jokeData2 = await joke2.json();
console.log("Fetched joke2:", jokeData2.value);
```
After building and starting the production server, when I refresh the
page, both `jokeData.value` and `jokeData2.value` are different,
uncached. If I want the other `fetch` to be cached, I need to explicitly
enable caching, e.g.
```ts
const joke = await fetch("https://api.chucknorris.io/jokes/random", {
cache: "no-cache",
});
const jokeData = await joke.json();
console.log("Fetched joke:", jokeData.value);
const joke2 = await fetch(
"https://api.chucknorris.io/jokes/random?category=dev",
{
cache: "force-cache",
}
);
const jokeData2 = await joke2.json();
console.log("Fetched joke2:", jokeData2.value);
```
This way the first fetch is not cached while the second one is.
### How?
The previous version claimed:
> Other `fetch` requests that do not opt out of caching will still be
cached in the Data Cache.
But below in the guide, we can see this:
> The default caching behavior of fetch (e.g., when the cache option is
not specified) is equal to setting the cache option to no-store:
So the first citation is misleading - the fetch requests are not cached
by default (with dynamic rendering - static rendering would cache the
single call it into the output), so we actually need to explicitly
enable caching to have them cached.
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Just a couple of adjustments to Caching docs claim that React State is
preserved upon SPA transitions - as of today, without the Activity API,
only shared layouts state is preserved.
And we are saying redirect should be called outside try/catch blocks,
but rather, it is the try block that's the problem. So I am rephrasing
that.
I still think it is best to keep the redirect away from the try/catch
statement altogether.
Clarifies that using conflicting options such as `{ revalidate: 3600,
cache: 'no-store' }` results in a warning in the terminal rather than an
error.
This change helps accurately reflect the current runtime behavior and
avoids misleading readers into expecting a hard failure.
The update improves developer understanding when configuring fetch/cache
strategies in their applications.
---------
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
This PR https://github.com/vercel/next.js/pull/80922 highlighted an
issue with the Link API reference.
Looking further into it I saw that we had mixed a few `AppOnly` +
`PagesOnly` tags, and needed a few more changes.
Fixes: https://github.com/vercel/next.js/issues/80800
`react-icons` only supports the pattern we show through
`react-icons/all-files`, which hasn't been updated in the past 5 years.
`react-icons` does group icons by sets, so the recommendation about
sticking to a set is still valid.
I chose `@phosphor-icons/react`, since they also have a section on why
importing only the icon you need is a good idea.
The `--disable-git` command was implemented in #68821 (released in
`v15.0.0-canary.119`).
It was documented in create-next-app/README.md, but not in the website.
I've seen several discussions online about the feature (usually from
people who remember an old `--no-git` flag) so this will be nice to
publish.
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Add `contentSecurityPolicy` to Image Component in docs. Also follow up
in on the type in `image-config.ts` to use the updated docs.
---------
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
I think this is a glaring omission from the docs that makes it very
difficult to understand how to use these API right.
See [this discussion on
Reddit](https://www.reddit.com/r/reactjs/comments/1lar2ss/comment/my2e3kl/).
I took a minimal approach but really this should be properly explained
somewhere because nobody knows this prop exists.
Sayakie