### What?
- Added separate links for the app and pages router in the shared documentation.
- Added comment at the top of all shared documentation.
- Fixed typos in pages documentation comment.
### Why?
- To limit the switching between the different routers in shared documentation when clicking the links.
It feels more natural to use the actual term "slot" when describing how
to interweave server and client components since it's used in other
frameworks as well.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Adds `payload` to the external package list
### Why?
To prevent developers using
[Payload](https://github.com/payloadcms/payload) modules within Next.js
from having to add this in their next config.
The specified default cache key `**.[jt]s` does not consider any files
in
folders, while `**/*.[jt]s` recursively includes all files.
The same goes for jsx/tsx.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
I made a video two years ago that was teaching old patterns of the
Next.js image component. Since then, we have simplified the API, made
improvements to the component that no longer require wrapping DOM
elements, and more. This updated video explains these concepts, as well
as walks through some of the practical examples in the `examples/` fold
here.
### Improving Documentation
Just fixing a typo into "alphabetical" word
- Run `pnpm prettier-fix` to fix formatting issues before opening the PR.
- Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide
### What?
Misleading typo
Close the circle after #51104. The name "size limit" can be confusing as it could also mean the size of the Server Action function itself, so this PR changes it to `serverActionsBodySizeLimit` and makes sure it's well documented.
### What this PR does
This PR fixes a minor typo on the Vercel Open Telemetry Docs.
`It's not extensible and you should configure OpenTelemetry manually
(if) you need to customize your setup.`
That is all :)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Due to the size of grid tracks specified in the CSS I amended the usage of the HTML `sizes` attribute.
The media can be ascertained from `gridTemplateColumns` and `gridGap` values, this change results in smaller images also being available in the srcset for use with sizes, which should be more performant.
The file extensions of the generated file extensions section are not what it's supposed to be or not what documentation has specified.
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
### What?
Adds missing "DO NOT EDIT" comment to some of the shared documentation pages"
### Why?
A few of the shared documentation files didn't have the comment to not edit them.
Tailwind CSS configuration is missing in the docs when configuring the `src` folder
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
### What?
Update Next.js with Supabase example
### Why?
Existing example for Next.js with Supabase is out of date
### How?
- Rename `with-supabase-auth-db-realtime` to `with-supabase`
- Update example to use App Router
- Use Supabase Auth Helpers for Next.js to configure auth cookies
---------
Currently the Server Action function with `"use server"` must be an
async function as it's required by the compiler, even if it returns a
promise already.
Given the amount of CSS ordering problems mentioned in the issue queue
(see #16630), it's clear, for most people, that it is NOT obvious that
the order of CSS concatenation matches the order of importing CSS and
modules inside `_app.js`.
We should try to make this fact explicit in the docs. Right now, it's
only implied.
## Documentation checklist
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [X ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
It's not totally clear from the docs that using `NEXT_PUBLIC_` env vars
will be a problem for pipelines that deploy the same image to multiple
environments (this bit us in a production incident). This PR is an
attempt to make it clear. Open to feedback/suggestions!
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
These docs were wrong because `./pages` is not sufficient to run a
codemod.
Imagine a project that has `./components` and `./pages` and many
directories for example.
Also its important to run at the root of the Next.js project so that the
path has a `next.config.js` because some codemods modify that config.
Tweak code owners after some testing and feedback.
- Move the Next.js team up to be optional global code owners (so that everyone can review but are not tagged for review). Global individuals should still be tagged if there are no specific `.vercel.approvers` files in subdirectories.
- Adds @vercel/devex to image files so there's coverage on those files for the docs
- Target specific folder and files for Styfle to get notified
- Deletes some rules in the old GitHub codeowners
Apparently the object deconstruction in the example doesn't work. This PR proposes a working version:
```diff
- export default function Page({ params: { slug: string } }) {
- return <div>My Post: {slug}</div>
- }
+ export default function Page({ params }: { params: { slug: string } }) {
+ return <div>My Post: {params.slug}</div>
+ }
```
According to the [page reference](https://nextjs.org/docs/app/api-reference/file-conventions/page), the page function parameter slugs needs to be retrieved by calling `params.slug`.
The TypeScript section below shows the correct function type signature, although not referencing to the parameter.
Added missing APIs, also sorted all of them alphabetically to make it
easier to read.
---------
Co-authored-by: Delba de Oliveira <delbabrown@gmail.com>
* Changes all `Note` → `Good to know`
* Consistently puts the colon on the outside of bold text
* Documents singe and multi-line styles in contribution guide
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Using client components for `usePathname` is not a de-optimization. This
update tries to make this more clear by sharing more information about
the design and tradeoffs of this approach.
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
This PR removes manual HTML `<b>` tags in `<details><summary>...` titles. They are unnecessary because we add bold styling in CSS.
Also did a tiny fix to some other unnecessary inline HTML.
### Fix Typo in Metadata API Description
#### Description:
This PR fixes a minor typo in the description of the Metadata API.
#### Changes:
- Fixed typo in the Metadata API description.
**File:** `docs/02-app/01-building-your-application/05-optimizing/04-metadata.mdx`
**Old Sentence:**
> Next.js has a Metadata API that can used to define your application metadata (e.g. `meta` and `link` tags inside your HTML `head` element) for improved SEO and web shareability.
**New Sentence:**
> Next.js has a Metadata API that can be used to define your application metadata (e.g. `meta` and `link` tags inside your HTML `head` element) for improved SEO and web shareability.
This change helps improve the readability and understanding of the documentation for readers and users.
#### Checks:
- [x] Followed the Docs Contribution Guide
- [x] Linting passes (`pnpm build && pnpm lint`)
This PR fixes the erroneous `revalidateTag` import on certain examples.
It was imported from `next/server`, but should be imported from
`next/cache` instead.
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Added a TS and JS switcher. Previously the code snippet did not have a
switcher. The file extension was .js when the code was TypeScript which
made it confusing to try to read.
---------
Co-authored-by: Lee Robinson <me@leerob.io>
Also changes JavaScript examples to use `.jsx` extensions so IDEs better recognize the JSX allowed as the first argument to `ImageResponse`.
Fixes#50141
### What?
The `useFormStatus` needs to be used in a client component. That
component should be used within a `form` for the `pending` property to
reflect the form status.
### Why?
The docs are currently not accurate.
### Notes
I could also update the name of the file to not be `form.js`, which
implies this is the entire form instead of just the submit button being
used as a component within the form.
## Why?
- When i click `red box` in following image, page returns 404 page.
<img width="1728" alt="스크린샷 2023-06-08 오후 7 31 37" src="https://github.com/vercel/next.js/assets/63336958/903b11e3-17af-426e-8787-b6e033c14a24">
## How?
- I found that `/` is missed at `docs/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx`.
- So I added `/`.
Move as much of codeowners as possible to use Vercel Spaces.
1. Makes `@timneutkens @ijjk @shuding @huozhi @feedthejim` global owners
2. Make the `@vercel/next-js` team _optional_ owners of **/docs**,
**/errors**, and **/contributing**, makes team owners of a few packages
as per old config.
3. Make `@vercel/devex` (docs and devrel) owners of **/docs**,
**/errors**, and **/contributing**
4. Make `@vercel/devrel` (devrel only) owners of **/examples**
5. Make `@vercel/web-tooling` owners of specific files and folders (as
per old config)
Leaves @styfle as owner of **image** files on the old config since this
pattern `/**/*image*/** ` can't be used with Vercel Spaces.
Note: We cannot add * or / at the end of files.
[Docs](https://spaces-docs.vercel.sh/docs/code-owners#:~:text=Code%20Owners%20files%20are%20meant%20to%20encourage%20distributed%20ownership%20definitions%20across%20a%20codebase.)
Since there is no longer a limitation that requires us to static analyze
`process.env`, this PR removes it from the build process and updates the
corresponding documentation.
### What?
Add a note that if a custom `distDir` has been set, the standalone build
can be found at the specified location and the static files folder has
to be copied to the custom location as well.
### Why?
This may be obvious, but such a note would've saved me some minutes, not
gonna lie.
### How?
\-
---------
Co-authored-by: Steven <steven@ceriously.com>
Fixes#49055, fixes#48918.
App dir will always require the server to run in the workers mode, so it
can keep a separate Node.js process for pages. This PR updates the
standalone server to initialize a "standalone server" (which works
similar to `start-server`), and changes the tracked files to include
Jest worker.
We bumped `undici` fetch which has a minimum version of 16.8.0 so we need to make sure `next` and `create-next-app` also have the same minimum version.
Since 14.x reaches End-of-Life on [2023-04-30](https://github.com/nodejs/Release), we can drop support for 14 in the next release.
See also:
- Related to #48870
- Related #48941
Updates the name of Next.js Analytics to Next.js Speed Insights
closes ALY-579
---------
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Hey! Hope this can help anyone dealing with this in the future.
I'm also using the `TinaMarkdown` provider to generate my MDX and one of the things that I've found helpful so that the image was better handled in the browser was to set position to `undefined`, as it was the only way to unset it from `absolute`, which was affecting the visual aspect of the page.
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation or adding/fixing Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
closes#48416
### What?
Standardize the "Note" format in the Next.js documentation for improved
consistency and readability.
### Why?
There are currently four different variations of "Note" formatting in
the documentation.
Standardizing to a single format will improve the overall experience for
users.
### How?
Update all instances of "Note" in the documentation to follow the most
common format, `**Note**:` (used in 27 files).
This will involve updating the following variations:
- `Note` (12 files)
- `Note:` (20 files)
- `**Note:**` (21 files)
---------
Co-authored-by: Steven <steven@ceriously.com>
### Why?
Making the explanation more obvious because it took quite a while for me
to figure out the difference between catch-all and optional catch-all,
and I think others may feel the same way too.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
It's currently not clear that `@vercel/otel` is just a simple wrapper
when you are trying things out. So I added an excellent example of how
to instrument create an OpenTelemetry setup.
The only FUD I have here is that people won't skip that `Manual
OpenTelemetry setup` and try to understand it. But I try to describe
this at the beginning of that section.
I'll also try to update `@vercel/otel` readme to be more transparent on
what it does.
- Removed duplicate information
- Add links into official docs to explain `http.*` attributes
- Properly explain what `next.page` means.
fix NEXT-945
---------
Co-authored-by: Lee Robinson <me@leerob.io>
This pull request updates the Local Images example in the Next.js
documentation to use an ``assets`` folder inside the ``src`` directory
instead of the ``public`` folder. The changes are made to emphasize the
recommended practice of organizing and importing static assets when
using the Next.js ``Image`` component.
The previous example could cause confusion as it suggested importing
images from the ``public`` folder, which is generally used for static
files that can be accessed directly via a URL. However, when using the
Next.js ``Image`` component, it is recommended to import images as
modules and store them in a folder like ``assets`` inside the ``src``
directory. This approach allows the Image component to optimize images
and prevent Cumulative Layout Shift while loading.
This PR changes the image import statements as the example below:
```jsx
import profilePic from '@/assets/me.png';
```
These changes aim to provide clearer guidance on how to handle local
images. To avoid misunderstandings while the developer follows the
documentation.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Added docs that mention:
- important code-snippets from example
- links to official OTEL docs
- document NEXT_VERBOSE_OTEL
- explain what we provide out of the box
- what we don’t
- explain how you can add tracing yourself
- explain how instrumentation.js works
- it can be used for different types of instrumentation that don't use
OTEL. It's just a hook called when starting up a new node environment.
- list of all spans we instrument by default
fix NEXT-799 ([link](https://linear.app/vercel/issue/NEXT-799))
---------
Co-authored-by: S3Prototype <liuqahs15@gmail.com>
