Missing documentation around `NEXT_DATA` hydration when using `getServerSideProps()`. This PR warn users that the result of `getServerSideProps()/getStaticProps` is also available on the client-side due to React Hydration so they should not use any sensitive information in the props.
## Bug
- [x] Related issues linked using [fixes number](https://github.com/vercel/documentation/issues/418)
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [ ] 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 <22380829+ijjk@users.noreply.github.com>
I couldn't understand well this sentence at the first time of reading as a non native english speaker. I think 'that' is needed here.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Based on https://github.com/vercel/next.js/issues/36551#issuecomment-1113457752 making the docs more clear which also aligns with the wording of Environment Variables in Middlerware: https://nextjs.org/docs/api-reference/next/server#how-do-i-access-environment-variables
See also: https://github.com/vercel/next.js/pull/20869#issuecomment-757799953
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Clarify that the environment variables are ordered in descending priority and that the existing system environment is not overridden.
fixes https://github.com/vercel/next.js/issues/36966
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
copy/pasting the SCSS example into VSCode results in linter warning. Fixed with semicolon on variable assignment. Added the second semicolon for consistency.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Documentation / Examples
- Updating Tina Demo URL
- Adding Tina to blog-starter example
- Adding Tina to Basic features section
- Updating Tina to actually work again
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
## Description
This PR implements a new configuration object in `next.config.js` called `experimental.images.remotePatterns`.
This will eventually deprecate `images.domains` because it covers the same use cases and more by allowing wildcard pattern matching on `hostname` and `pathname` and also allows restricting `protocol` and `port`.
## Feature
- [x] Implements an existing feature request.
- [x] Related issues linked
- [x] Unit tests added
- [x] Integration tests added
- [x] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`
## Related
- Fixes#27925
- Closes#18429
- Closes#18632
- Closes#18730
- Closes#27345
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Improve wording
- [ ] Make sure the linting passes by running `yarn lint`
* Added type to Page Component for TypeScript
Following this tutorial, I noticed that TS was complaining that "getLayout" did not exist on Page. That is normal since Page is typed as NextPage. I simply exported the new type we create in "_App.tsx" and used it as the return type for Page. This will probably help others seeing that red in their editors and perhaps being confused.
* Small linting change
* Apply suggestions from code review
* Update layouts.md
* lint fix
* update type
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This makes it clear that the font optimization adds these for you.
This avoids duplicate `<link rel="preconnect" />` in the HTML output if the developer is unaware that it is being added automatically.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
ISR works self-hosted, but there's some more guidance needed when hosting with container-based setups (e.g. Kubernetes) and how the files are shared between different pods. This was based on community feedback. Please let me know if you'd like to see any additions here! 🙏
Changing the paragraph to not include `beforeInteractive` as one of the possible use cases of `onLoad`.
*Update:* Added docs for `onError` in the API reference of `next/script`.
@housseindjirdeh does `onError` also has the same limitation or is this only for `onLoad`?
Closes https://github.com/vercel/next.js/issues/33402
## 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`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Overview
The subject is `When does getStaticPaths run` but this docs denotes about `getStaticProps`.
So could you check `getStaticProps` is right?
## Documentation / Examples
- [X] Make sure the linting passes by running `yarn lint`
Changes to the beforeInteractive strategy to make it work for streaming
Splitting `beforeInteractive` into two strategies `beforeInteractive` at the _document level and `beforePageRender` for page level <Scripts>
#33097 adds a note to the `Script` documentation explaining that `onLoad` cannot be used with the `beforeInteractive` strategy. However, this note was missing in the [Basic Features](https://nextjs.org/docs/basic-features/script) documentation, causing some confusion. This adds the note there too.
This will hopefully fix a lot of confusion noted in https://github.com/vercel/next.js/issues/33191.
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order 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:
--
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
** I've made the change via GitHub UI sorry :)**
Hi,
I think the "data must be public" condition on getSSP is not really true, and even counter-productive. Being able to statically render more content is most probably positive, in terms of perceived and real performance of the app + energy consumption. It's actually totally possible, and not even that hard thanks to middleware, to statically render custom, paid, segment-specific content (and even individual-specific content under certain conditions).
I've documented the reason for this change in a few places if you want more details:
- related PR on React: https://github.com/reactjs/reactjs.org/pull/4566
- demo implementation and explanation on how to couple middlewares and getSSP to statically render any kind of content (including custom content): https://blog.vulcanjs.org/render-anything-statically-with-next-js-and-the-megaparam-4039e66ffde
Removed the misleading TTFB information. It was easy to read that incorrectly and while getStaticProps does have a better TTFB that's not why you might need to avoid getServerSideProps, I gave better examples.
I also wanted to answer "well how do I cache `getServerSideProps`?" and now there's a link.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
Added missing closing double quote : `strategy="worker` -> `strategy="worker"`
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
The following files have been modified.
- `docs/api-reference/next.config.js/rewrites.md`
- `docs/basic-features/script.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Leave more clear that <Script> component can't be used inside Head. Current it says "without need", which don't implies it can't be used.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
While reading the documentation, I noticed that this paragraph was not correctly written and was hard to read. I fixed it adding a dot.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
This PR adds a new layout mode for images called `raw`, as discussed with the core team a while back. This mode has the following characteristics:
- No wrapper `span` around the `img` element
- No sizer svg
- Almost no styles automatically added to the `img` element
- `style` parameter is allowed and is passed through to the underlying `img` element
This also adds documentation changes to describe the new component.
There are a few tradeoffs and DX decisions that may warrant discussion/revision before merging. I'll add a few comments to highlight those issues.
- Related to #18637
## Summary
This PR adds a new `worker` strategy to the `<Script />` component that automatically relocates and executes the script in a web worker.
```jsx
<Script
strategy="worker"
...
/>
```
[Partytown](https://partytown.builder.io/) is used under the hood to provide this functionality.
## Behavior
- This will land as an experimental feature and will only work behind an opt-in flag in `next.config.js`:
```js
experimental: {
nextScriptWorkers: true
}
```
- This setup use a similar approach to how ESLint and Typescript is used in Next.js by showing an error to the user to install the dependency locally themselves if they've enabled the experimental `nextScriptWorkers` flag.
<img width="1068" alt="Screen Shot 2022-03-03 at 2 33 13 PM" src="https://user-images.githubusercontent.com/12476932/156639227-42af5353-a2a6-4126-936e-269112809651.png">
- For Partytown to work, a number of static files must be served directly from the site (see [docs](https://partytown.builder.io/copy-library-files)). In this PR, these files are automatically copied to a `~partytown` directory in `.next/static` during `next build` and `next dev` if the `nextScriptWorkers` flag is set to true.
## Checklist
- [X] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [X] Related issues linked using `fixes #number`
- [X] Integration tests added
- [X] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
This PR fixes#31517.
- Moves example out of hidden dropdown at the top and features more prominently
- Adds a clone and deploy link for those looking to get started immediately
- Cross-posts ignoring TS errors docs over, because I've personally assumed it should be on this page and then ctrl+f found nothing
- Added version history to the top, based on contents of this file
- Remove custom app caveats from code snippet to improve copy-paste ability
The Font Optimization docs have an outdated example that recommends
adding fonts via `next/head`. This is an anti-pattern that Next.js
has already warned about through ESLint for a while (see
https://nextjs.org/docs/messages/no-page-custom-font) and is now
starting to warn about through the console because it won't work
well with streaming architecture.
This change removes the outdated example from the docs.
Fixes#34693
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR adds information on rendering an error page (500 page specifically) when using `getServerSideProps`.
## Bug
- [x] Related issues linked using https://github.com/vercel/documentation/issues/106
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
In addition to https://github.com/vercel/front/pull/12473, this PR adds an example to the section :Write server-side code directly.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Follow up from https://github.com/vercel/next.js/pull/33410.
Adds version history for Middleware so it's more clear it launched in beta, and that we have a place to track changes.
The [correct](https://www.grammarly.com/blog/et-cetera-etc/) way to use et cetera is to put a period right after and a comma behind it if it's being used as a list. I updated the occurrences in the docs and examples that didn't match these rules.
My team & I keep asking the question "What order are env vars _actually_ loaded in?".
This addition surfaces the order in a clear and readable way without having to read and understand the entire "Environment Variables" documentation first.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR addresses minor docs-related styling issues on the Getting Started, Data Fetching (Get Server Side Props), etc pages. It follows the mechanics of the Docs Content Style guide to maintain consistency across all documentation.
Also fixes some minor issues such as missing period at the end of a sentence on docs pages like as Data Fetching (getStaticProps).
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `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`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Since the variable name is called `data`, I believe checking `profileData` will always be `undefined`.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Copy pasting this example with a default create-next-app leads to an eslint warning. So I thought let's fix this.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Details about downloading and self-hosting font files were missing from our[ Font Optimization docs](https://nextjs.org/docs/basic-features/font-optimization). This PR addresses these changes.
## Bug
- [x] Related issues linked using #33054
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
