## List of changes made:
- [x] Replaced babel with SWC when talking about compilers & backlinked to the Next.js 12 blog post
- [x] Changed "Setup" heading to "Automatic Setup" to make it more clear
- [x] Changed one of the cards in the "related" section to be consistent with the rest
- [x] Minor grammatical fixes
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
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.
This is a rewrite of the FAQ section as it's quite outdated. Thank you to @styfle and @leerob for the suggestions.
**Here's a list of changes I've made:**
- Removed “How big is it”
- Removed “What syntactic features are compiled? How do I change them?”
- Replaced all occurances of "it" with "Next.js"
- Changed "Is Next.js production ready?" to mention showcase
- Started the answer to each question with either yes or no for yes/no questions
- Listed more pros for router section, changed question name, and backlined to migrating from react router docs
- Revamped "fetching data" answer to list all our data fetching methods and backlink to docs
- Made "Can I use Next.js with my favorite JavaScript library?" more clear and emphasized the large number of examples we have
- Reorganized questions to make more sense
- Made wording more consistent throughout
**Additional Questions:**
1. Do we want to keep the "What inspired Next.js" section the same? One option could be to only keep the first sentence linking to G's article and not talk about PHP because of its reputation among newer web developers as an old & outdated technology.
2. What's the advantage of routes always being lazy-loadable? I'd like to add this to the last bullet point of the new router question to make it obvious what the benefit is.
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Mark some previously experimental swc compiler options as stable under a new `compiler` option
## 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`
Add note that explains the need to pass `prefetch={false}` to `Link` component to prevent clearing cookies accidentally
(responding to issue "Docs: potential preview-mode error on production build #34129").
Note as follows:
> **Note:** If calling this route using `Link` component, you must pass in `prefetch={false}` to prevent calling `clearPreviewData` during prefetch.
## 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`
Added a mention that `fallback: true` behaves like `fallback: 'blocking'` back into docs. It was originally added in https://github.com/vercel/next.js/pull/29121.
## Feature
- [x] Documentation added
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
- Add support for async function / promise export in next.config.js/.mjs
- Update docs
Adds support for https://twitter.com/timneutkens/status/1486075973204422665
But also the simpler version:
```js
module.exports = async () => {
return {
basePath: '/docs'
}
}
```
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [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
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
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`
as handle() returned from app.getRequestHandler() is a Promise, it has to be handled correctly. Simply returning it, works fine.
## Bug
- [x] Related issues linked using fixes #number
- [x] Integration tests added
- [x] Errors have helpful link attached, see contributing.md
## Feature
- [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
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see contributing.md
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
We want to prefix the default locale to the current path (`/path`), not the current href (`http://domain.tld/path`).
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
The recommended code for `_middleware.ts` does not work in prod, but does work locally. You need to use `request.nextUrl.pathname` to properly redirect from what I can tell. You also need to have a quick helper function to strip off the `/default` locale at the start of the pathname as we are providing `/en` as a fallback locale.
FWIW - I am pretty new to NextJS. Someone with more experience should probably review this suggestion before merging it. What I can tell you however is that the code as it is in `_middleware.ts` works locally but breaks in prod. To test this out use the code and navigate to `https//www.mysite.com` - it will work as expected on the root url, as this matches `nextUrl.href`. Now try navigating to `https//www.mysite.com/about` and you will be redirected to `https://www.mysite.com/en/https://www.mysite.com/about`.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Closes: https://github.com/vercel/next.js/pull/33762
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
* Add `async` to middleware docs.
I was reading the docs and got nervous. It looked like middleware didn't support async/await. After digging into the examples I found out it is possible.
Not 100% sure if this is the docs change yahs want, but I thought I'd open a PR just incase.
* Add middleware API note
Co-authored-by: JJ Kasper <jj@jjsweb.site>
We need to make some quick fixes to the Form guide. The PR changes title and meta description.
## 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`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
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`
## Documentation Update
Based on this issue: https://github.com/vercel/next.js/issues/29319
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
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`
To help prepare for React 18, I've found myself sharing the updated code snippet of `_document` linked in the [React 18 docs](https://nextjs.org/docs/advanced-features/react-18#react-server-components), which uses a function instead of a class.
This PR updates the Custom Document docs to help prepare for this change, by encourage readers to use the new version, and listing more tangible examples of why you would override `_document` (`lang` on `html`, className on `body`). It also reorganizes some of the caveats and warnings related to `getInitialProps` usage to only be in the single section that applies to it.
These overrides and ejections (`getInitialProps` and `renderPage`) only apply to a subset of the people looking to change document.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
We made the images expand to fit the full width of the container, but the deploy button image shouldn't be that large. Also made some slight refactors here to improve on my past documentation changes.
Explicitly mention disabling `bodyParser` when processing a webhook request. Uses the "webhook" keyword that becomes searchable in the docs for anyone running a search from the sidebar.
It addresses the issue [here](https://github.com/vercel/documentation/issues/71) and [this discussion](https://github.com/vercel/community/discussions/93).
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR added about `providerImportSource` option, which we need to specify in `next.config.js` to use `MDXProvider`.
Related mdx documents: https://mdxjs.com/docs/using-mdx/#mdx-provider
> To solve this, a context can be used in React, Preact, and Vue. Context provides a way to pass data through the component tree without having to pass props down manually at every level. Set it up like so:
> 1. Install either @mdx-js/react, @mdx-js/preact, or @mdx-js/vue, depending on what framework you’re using
> 1. Configure your MDX integration with options.providerImportSource set to that package, so either '@mdx-js/react', '@mdx-js/preact', or '@mdx-js/vue'
> 1. Import MDXProvider from that package. Use it to wrap your top-most MDX content component and pass it your components instead:
Because my English skills are not high, feel free to improve my sentences.
## 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`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
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`
This PR improves the Content-Security-Policy header usage explanation in the `next.config.js` file.
## Bug
- [x] Related issues linked using fixes#33598
- [ ] 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
- [x] Make sure the linting passes by running `yarn lint`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This prevents users who copy and paste the options without creating the associated file from experiencing an error. The option is explained in the Jest Docs and in the `Optional: Extend Jest with custom matchers` section.
Update outdated TS/TSX compiler information in the documentation.
## 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`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
This PR removes the duplicate overview link for data fetching, and fixes the corresponding links
## 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: Lee Robinson <9113740+leerob@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
```diff
- Styleheets and images ....
+ Styleheets and images ....
```
closes#33754
## 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`
* Changed data fetching file name to overview to fix meta data title
* Update docs/api-reference/data-fetching/get-server-side-props.md
Co-authored-by: Steven <steven@ceriously.com>
* Update manifest and check
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
The initial link was showing 404 not found
## 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`
There is a duplicate key, `testEnvironment` in one of the examples that are located in docs/testing.md.
In my humble opinion, It is not good to have an error in examples.
My suggestion is we have only one key and it is up to developers what options they have for the `testEnvironment`.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
1. fix details on how next handles security headers
* note: check your HSTS at https://hstspreload.org
* if your using headers in the config you need to add them below like
## 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: Steven <229881+styfle@users.noreply.github.com>
The paths starting with slashes in the ESLint config examples are absolute, which are almost never the correct configuration for a project. Using a relative path is a much more common configuration, and leads to much less debugging why these examples don't work.
## 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`
## Feature
Implements feature requested in https://github.com/vercel/next.js/issues/30805.
A few people including myself have been looking to use Relay with Next.JS and want to use the new Rust Compiler. This is my stab at an implementation.
### How it works?
Finds all `graphql` tagged template experssions and replaces them with `require`s to the file generated by Relay.
### Where I need help
- I've only worked with Rust a handful of times so I would appreciate any feedback on my use of language features.
- Is there any performance overhead to many duplicate usages of `require`? I imagine there's a cache in place but I want to be sure.
- I've added some unit tests & integration tests but I might be missing some use cases. Feel free to comment some use cases I'm not thinking about.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- I haven't added any docs since this is an experimental API.
## Documentation / Examples
You're expected to be running the Relay Compiler along side Next.JS when you're developing. This is pretty standard. I wouldn't expect people to have any problem with this.
### Usage
In your `next.config.js`
```js
module.exports = {
experimental: {
relay: {
language: 'typescript', // or 'javascript`
artifactDirectory: 'path/to/you/artifact/directory' // you can leave this undefined if you did not specify one in the `relay.json`
}
}
}
```
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
* Added 'rootEl' oprional property to next/Image component resembling 'root' option of the Intersection Observer API
* changed 'rootEl' to 'lazyBoundary' and its type as well
* added test, fixed initial root detection
* Update test/integration/image-component/default/test/index.test.js
Co-authored-by: Steven <steven@ceriously.com>
* prop names changed
* added 'lazyroot' prop to the documentation
* removed unused import
* Apply suggestions from code review
* Update docs with lazyRoot added in 12.0.9
Co-authored-by: Steven <steven@ceriously.com>
Reading over this page, it wasn't immediately clear to me if these were headers which would get read off of the incoming request, or headers to be added to the outgoing response.
## Documentation / Examples
- [X] Make sure the linting passes by running `yarn lint`
Make it clear that `geo` is not populated by the default Next.js server, and requires your hosting platform to integrate with a geolocation service to look up the location based on the request.
If self-hosting, for example, this could be achieved with the [Google Geolocation API](https://developers.google.com/maps/documentation/geolocation/overview).
Upgrading from 12.0.0 to 12.0.8 results in `[dev] error - Error: To use middleware you must provide a `hostname` and `port` to the Next.js Server` and this requirement did not seem to be documented anywhere. Fixes#33450 which seems to have been erroneously closed.
## Bug
- [X] 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>
Before
```jsx
export const getServerSideProps = withSession(async function ({ req, res }) {
if (!req.session.user) {
return {
redirect: {
destination: '/login',
permanent: false,
},
}
}
return {
props: { user }, // User not defined
}
})
```
Add a note to the onLoad section of the next/script documentation clarifying that onLoad will not run if `strategy="beforeInteractive"`. (That tripped me up for a bit so I thought I'd update the docs to save any one else the hassle :).)
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Adds docs for some experimental flags that were already shipped to stable.
## 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`
Mention middleware to access the request for a page that uses `getStaticProps`, e.g. for authentication purposes.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Found some broken links in the updated Data Fetching docs. Fixed all of these.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Copy pasting the first paragraph will trigger the `@next/next/google-font-display` lint rule, users should be able to copy and paste it without warnings.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
The statement I have removed may be misleading. A colleague of mine has interpreted it as ‘we need to create a custom page or `<Link href="/redirect-path" />` won’t work on the client’. I just ran `npx create-next-app --example redirects redirects-app` and confirmed that this was not necessary.
So saying that redirects “do not affect client-side routing” is probably wrong. They do and they do it the right way.
This PR adds links from the data fetching api pages to their api ref pages. Also removes rouge backticks on header
## 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`
This PR removes the backticks used when referring to a data fetching api in a title `getStaticProps` => 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
- [ ] Make sure the linting passes by running `yarn lint`
* Docs: correct ignorance pattern for env.local
In order to gitignore `.env.local`, I need to add `.env*.local` instead of `.env.*.local` to `.gitignore`.
* Update docs/basic-features/environment-variables.md
Co-authored-by: Steven <steven@ceriously.com>
* Update docs/basic-features/environment-variables.md
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
## Desscription
This is a follow up of https://github.com/vercel/next.js/pull/32873. As discussed in #32873, currently it's not recommended to use getServerSideProps in the `Error` component, so this PR will add that caveat to the documentation page, like `Document` and `App` also have.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Proposes fix to #33110
Adds info on environment variables and the /src folder in the following docs:
- https://nextjs.org/docs/advanced-features/src-directory
- https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
## 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
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
Proposes some minor text-copy cleanup in the following docs:
- https://nextjs.org/docs/basic-features/fast-refresh
- https://nextjs.org/docs/basic-features/environment-variables
## 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
- [x] Make sure the linting passes by running `yarn lint`
Building off https://github.com/vercel/next.js/pull/31465 for `next export` docs.
- Clearly explains the standard output from `next build`
- Move Dockerfile snippet to example, instead of embedded directly
- Clarify both Vercel and `next start` use the Build API output spec
- Less emphasis on recommending Vercel (more neutrality)
- Mention Middleware & Edge Functions when discussing Vercel
- Add "Going to Production" link at the bottom for related reading
This PR adds a new command to the `next` CLI.
Running `next info` will print useful information to the terminal about how/where Next.js is run. This information can be added to the Bug report when opening an issue in the repository.
This makes reporting issues more accurate and doesn't require the user to guess certain details, the command will retrieve it on their behalf.
Example output:
```sh
$ npx --no-install next info
Operating System:
Platform: linux
Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binaries:
Node: 16.13.0
npm: 8.1.0
Yarn: 1.22.17
pnpm: 6.24.2
Relevant packages:
next: 12.0.8-canary.14
react: 17.0.2
react-dom: 17.0.2
```
The idea is based on #32858
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [x] 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: Steven <229881+styfle@users.noreply.github.com>
Updated wrong link to example of gtag init
## 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`
The example cited doesn't make sense, unless I'm truly missing something. The example is talking about hashes... i.e. #about. Not a query param, like ?=count=10. So in the example, the scroll={false} doesn't make any sense, since the href is not using a hash/anchor tag. I could be wrong, so be gentle.
## 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 current example attempts to remove resolve the relative pathname of the absolute pathnames given by `lint-staged` using string manipulation and `process.cwd()`. This is a risky solution because pathnames have many platform dependent edge cases. The example also returns pathnames that are technically wrong in linux. `/home/project/file => /file`,
I propose to use the utilities provided by node.js to resolve the relative pathnames, and to format the sample `.lintstagedrc.js` file in a manner easier for novice programmers to understand and modify.
## 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`
Currently you don't need to enable `concurrentFeatures` to start using React 18, this PR makes the docs more clear on that.
## 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`
* chore: convert Jest examples to TypeScript
* test: use absolute imports in test files
* chore: address review comments
* fix: add pages to tsconfig.json paths
* fix: add styles to tsconfig.json paths
* chore: upgrade dependencies/snapshots
* docs: match Testing docs with example code
* docs: link to docs from mock test files
Co-authored-by: Lee Robinson <me@leerob.io>
It adds AbortController and AbortSignal Web runtimes APIs to be used by the user at Edge Functions.
For doing that it delegates into `abort-controller` dependency that has been frozen to prevent any modification.
Co-authored-by: Zhang Zhi <20026577+fytriht@users.noreply.github.com>
This PR adds a section on certain router methods returning a promise, and the error you will see if you have no-floating-promises enabled.
## Bug
- [x] Related issues linked using fixes: https://github.com/vercel/next.js/issues/31337
- [ ] 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`
It took me a while to work out that if using TypeScript with the `baseUrl` set to `.` (quite common) - then the tests fail as Jest can't find the modules.
Explicitly setting the `moduleDirectories`, as per the change to the config, fixes this issue.
## Documentation / Examples
- [x] Fixup commit
- [x] Make sure the linting passes by running `yarn lint`
## 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`
* Include mention of the onError Prop
None of the documentation includes this, despite being written into the code.
Would be good to mention the function signature change somewhere between v11 and v12 that now includes the error object. (Was confused when my TS definitions were complaining about my onError handler, reading the repo's code while using the v11.1.x version in my project)
* Update docs/basic-features/script.md
Co-authored-by: Steven <steven@ceriously.com>
* Update docs/basic-features/script.md
Co-authored-by: Steven <steven@ceriously.com>
* lint-fix
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
## 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`
* Update react version to rc in react-18 doc
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Local Images is on the Image Optimization page under the Basic Features docs
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
This adds documentation to explain how the `outputStandalone` config can be leveraged to reduce production deployment size and leverage the output file traces. This also adds a note for the `outputFileTracingRoot` config as it may be needed in some monorepo setups.
A follow-up PR will update our Docker example to leverage this config as well.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
x-ref: https://github.com/vercel/next.js/pull/31003
x-ref: https://github.com/vercel/next.js/issues/32252
Closes: https://github.com/vercel/next.js/issues/30822
The details about starting a development server and viewing your changes locally are wrongly placed in the Getting Started section in the Next.js Docs. Currently, it resides under the "Manual Setup" section. Ideally, it should be under the "Setup" section.
## Feature
- [x] Related issues linked using #31998
- [x] Documentation added
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
`id`'s are not generated automatically without plugins like `rehype-slug`.
https://github.com/vercel/next.js/issues/32158
## 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`
## 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`
It's fairly opaque to the user that there are problems with `sharp` in an out-of-the-box Linux environment, and so if `sharp` is going to be explicitly recommended for non-Vercel production environments then I think it's a good idea to make sure people are aware of the possible issues.
My vanilla Heroku deployment was using wild amounts of memory until I found the details in the sharp docs about how to configure the memory allocator, so signposting this a bit better should help prevent issues in future.
## 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: Lee Robinson <9113740+leerob@users.noreply.github.com>
This allows TypeScript users to have type safety for middleware functions.
- Closes#30490
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
## Bug
Fixes: #31675
Functional document without gIP should be enabled when streaming is enabled, even without rsc
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
In the `Server Components APIs (Alpha)` code sample, importing `React` is unnecessary. People may think that having `react`'s default export imported is needed to use `Suspense`
Update documentation to have proper type for the url parameter of router.push method. Also add link to Node.JS documentation for full explanation of the UrlObject properties.
Next config `phase` attribute's default value list has been extended. This PR extends the number of referenced lines in the documentation.
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR adds a note on how to access env vars in middleware
## Bug
- [x] Related issues linked using fixes: #30612
- [ ] 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: Steven <229881+styfle@users.noreply.github.com>
This PR adds a new section on using MDX. It includes a guide for setting up Next.js with `@next/mdx`
## Bug
- [ ] Related issues linked using fixes: https://github.com/vercel/next.js/issues/29597
- [ ] 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.
- [x] Related issues linked using Fixes: https://github.com/vercel/product/issues/35
- [ ] 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: Steven <steven@ceriously.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Lee Robinson <lrobinson2011@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Fixing a small typo in the sentence « It is recommend.. » about Playwright.
<!--
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:
-->
## 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`
There is missing equals sign in the type declaration in the example for API Routes.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This clearly lists what transforms are supported, which are currently experimental, and what is still unsupported with a place to leave feedback and your existing Babel setup.
Changing the install tags to beta since react released the [beta](https://github.com/reactwg/react-18/discussions/112) today
## 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`
This fixes the iron-session example url from an old url to the new,
always-up-to-date url.
I believe the Next.js team owns the previous url but it's not up-to-date.
This commit also changes req.session.get("user") => req.session.user to reflect
the new API.
Adds a few commas where they could improve the clarity of the sentence.
- [X] Make sure the linting passes by running `yarn lint`
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
There is a non-valid mix of classic and arrow function notation in the documentation. I've fixed it to be a classical function notation because all the other examples are like that.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
"styled-jsx" link was broken. Added `/docs/` prefix and removed `.md` suffix to fix it.
Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Added a link to third "Internationalized Routing"
## 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`
Added Playwright to the top of the page and links to help readers jump to sections.
## 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`
Include required steps for the latest React and Next.js version upgrade via npm/yarn.
## 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`
This PR does the following to partially address #31062:
- Expands the [Script Component](https://nextjs.org/docs/basic-features/script) page in the core documentation
- Adds a `next/script` API reference page
When you edit your code, and Next.js is compiling the application, a compilation indicator appears in the bottom right corner of the page.
In some cases this indicator can be misplaced on the page, for example, when conflicting with a chat launcher. To change its position, open `next.config.js` and set the `buildActivityPosition` in the `devIndicators` object to `bottom-right` (default), `bottom-left`, `top-right` or `top-left`.
I also added the documentation for both `devIndicators.buildActivity` & the new `devIndicators.buildActivityPosition`.
## Feature
- [x] Implements a new feature
- [x] Documentation added
In Setting the status code of a response, it says "returns a name property with the value of John Doe as a JSON response". But, the code example actually returns a message property with a different value.
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
This adds a note for the query being updated for rewrites on static pages.
Closes: https://github.com/vercel/next.js/issues/30720
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Fixes#29023
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] 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
This PR:
Fixes a broken link in the testing documentation. It appears that the selector currently being used is `#test-environment-variable`. When clicked this results in the user being re-directed to the top of the environment variables page. The correct selector is: `#test-environment-variables`
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
* Fix `currentFeatures` to `concurrentFeatures`
Small typo fix in docs
* Apply suggestions from code review
Co-authored-by: Shu Ding <g@shud.in>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Shu Ding <g@shud.in>
This change addresses some feedback that some users don't realize
that the `priority` attribute exists and is critical for managing
LCP when using the next/image component. It adds a dedicated
section to the Image Optimization doc that explains how and when
to use the attribute.
Fixes#29624
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## 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`
## 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`
## 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`
resolve absolute URLs in CSS when using urlImports
remove `[path]` from static static image output path
replace file-loader with asset module, remove file-loader
* Add initial documentation for output file tracing
* Apply suggestions from code review
Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Steven <steven@ceriously.com>
Added install instructions for eslint-config-prettier before adding Prettier to the ESLint config.
## 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
…/image` Error
While learning how to test next.js applications I came across this error when testing components using next/image with an image import
eg:
```
// /quiz-hero
import Image from 'next/image';
import quizImage from '../../public/undraw-quiz.svg';
// In render
<Image
height='91'
width='198'
layout='fixed'
src={quizImage}
alt='QuizImage'
/>
```
### Error ->
Failed to parse src "test-file-stub" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
This is fixed by adding a "/" to the beginning of your file-stub module export string.
This is not an error when you're awaiting an image using async waitFor, But comes up as an error when you're testing a component that holds another component with a "next/image" import.
eg:
```
// quizHero.test.tsx works like this without change.
const image = await waitFor(() => screen.findByAltText('QuizImage'));
// but index.test.tsx fails rendering the homepage without the change.
render(<Home />); // Error: Failed to parse src "test-file-stub" on `next/image`...
// with change to __mocks__/fileMock
quizHero.test.tsx //test pass
index.test.tsx //test pass
```
<!--
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:
-->
## Bug
possibly related to -> #26749
## Feature
- [X] Documentation added
## Documentation / Examples
- [X] Make sure the linting passes
## Bug
- [x] Related issues linked using Fixes: https://github.com/vercel/front/issues/11154
- [ ] 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
* The previous `npm run jest` command did not match up with the testing script added to the example `package.json`
* Fixes#29777
## Bug
- [x] Related issues linked using `fixes #number`
- [N/A] Integration tests added
- [N/A] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
## 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
This PR contains an overhaul of the image component documentation for next (both the [primary usage doc](https://nextjs.org/docs/basic-features/image-optimization) and the [API reference](https://nextjs.org/docs/api-reference/next/image)). This PR does not change the filepath/URL for either of those documents, but that may still be warranted as right now Google searches for "next.js image component" and the like return the API document as the first result, which is not optimal.
The changes to the docs are based on feedback from the community and with input from @leerob. I'm marking this PR a draft because we will likely want to have a round of revisions before merging, but in general I consider this PR "read to go," contingent on buy-in from other stakeholders.
The basic goal of the changes are as follows:
1. Simplify the getting started page by moving extraneous detail to the API documentation.
2. Refocus the getting started page on practical usage information
3. Add additional content to address issues that have come up as common pain-points around the image component, such as image sizing and styling.
Fixes#21786
CC: @styfle @timneutkens @kara @spanicker
Fix a small error in the `next/script` docs.
Let me know if you'd like a `useState` for the sake of a complete example.
## 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
`getInitialProps` is already being referenced on the [Custom `App`][1] page, since it's the only supported data-fetching method for custom `App` components, but folks who started using Next.js after the advent of `getStaticProps` and `getServerSideProps` may not be familiar with the `getInitialProps` API.
[1]: https://nextjs.org/docs/advanced-features/custom-app
## Documentation / Examples
- [x] Make sure the linting passes
Ability to provide a custom tsconfig file.
**Example Usage:**
```js
// next.config.js
module.exports = {
typescript: {
tsconfigPath: "myconfig.json"
}
}
```
## 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.
- [x] Related issues linked using [`fixes #23972 (discussion)`](https://github.com/vercel/next.js/discussions/23972)
- [x] 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
* Update headings to clarify that we're describing. Add heading for Authentication API Routes
* Start adding API route examples
* Start adding API route examples
* Start adding API route examples
* Start adding API route examples
* auth: Replace clerk packages with @clerk/nextjs
* Add API authentication example to with-clerk
* Fix footer links
* Proofread, ensure consistency
* Update example's props to use new version
* Update example links
* Add rel tag to _blank link
* Obscure the authentication provider in the example
* Replace example
* Reset authentication docs, list Clerk as vendor
* Re-fix typo
* Change sample to example
* Add the example
* Update examples/with-clerk/package.json
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Peter Perlepes <p.perlepes@gmail.com>
Co-authored-by: Lee Robinson <me@leerob.io>
Fixes#16442
The current instructions on the Debugging page currently only work for server-side code, and furthermore, the page doesn't actually _say_ that they only work for server-side code.
This update adds instructions for debugging client-side code in both VS Code and Chrome DevTools. It also improves the suggested VS Code launch configurations to take advantages of some relatively recent features in VS Code's [built-in JavaScript debugger][1]. Using the `node-terminal` and `pwa-chrome` launch types removes the need to manually pass an `--inspect` flag to the underlying Node.js process.
[1]: https://github.com/microsoft/vscode-js-debug
Let me know if there are any edge cases I didn't consider with these VS Code launch configs!
## Documentation / Examples
- [x] Make sure the linting passes
I also removed the custom server link here, because I think it's making too strong of a correlation between custom server and Node.js server using `next start`, which aren't the same.
## 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
Added () outside *demo"
## 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
Changed - function component to - functional component in the heading and sentence below:
If the child of `Link` is a functional component, in addition to using `passHref`, you must wrap the component
## 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
I found that an example for a redirect rule in the documentation doesn't have the required property `permanent`. I noticed this because I tried to use that same rule but building fails with the following message:
```
`permanent` is not set to `true` or `false` for route {"source":"/:path((?!another-page$).*)","has":[{"type":"host","value":"example.com"}],"destination":"/another-page"}
Error: Invalid redirect found
```
My PR simply adds the missing `permanent` property as false to be consistent with the rest.
## Documentation / Examples
- [x] Make sure the linting passes
In talking to partners, I've seen a lot of confusion about the number of wrapping `<div>`s around the image element rendered by `next/image`. There's always just one single wrapper--this PR updates the docs to make that a little more explicit.
Current docs on exposing environment variables to the browser are slightly misleading as they say that variables loaded from `.env.local` are only available in node by default, but this is the case for all environment variables not just those loaded from `.env.local`.
## Documentation
- [x] Make sure the linting passes
Previous to this change, getServerSideProps could only return plain objects
for props, e.g.:
```javascript
export async function getServerSideProps() {
return {
props: {
text: 'some value',
}
}
}
```
With this commit, the props object can also be a Promise, e.g.
```javascript
export async function getServerSideProps() {
return {
props: (async function () {
return {
text: 'promise value',
}
})(),
}
}
```
For now, the framework simply waits for the results of the props Promise to resolve,
but this small change sets the groundwork for later allowing props to be streamed (cc @devknoll).
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. -- *This is part of @devknoll's ongoing work to support streaming.*
- [ ] 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. *not sure if this applies here*
- [ ] Errors have helpful link attached, see `contributing.md`
"exclusive of" implies that it doesn't pertain to `export` https://www.merriam-webster.com/dictionary/exclusive%20of "Exclusive to" implies that it's only relevant to `export`.
Also changed "can not" to "cannot".
## 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
This PR updates the with-jest example to the latest version of Jest and adds a note about the Jest and RTL testing environments (related to this [discussion](https://github.com/vercel/next.js/discussions/28337)). Also adds minor tweaks to the testing docs.
## 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
* Use recommended pattern in testing example
Since the official linter for testing library, `eslint-plugin-testing-library` recommends using `screen` to write queries, this MR updates the testing library example to follow the pattern recommended by the linter.
> DOM Testing Library (and other Testing Library frameworks built on top of it) exports a screen object which has every query (and a debug method). This works better with autocomplete and makes each test a little simpler to write and maintain.
> This rule aims to force writing tests using built-in queries directly from screen object rather than destructuring them from render result. Given the screen component does not expose utility methods such as rerender() or the container property, it is correct to use the render returned value in those scenarios.
See the `prefer-screen-queries` rules docs for more info: https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-screen-queries.md
* Update devDependencies
* Install and configure test linting
* Use recommended pattern in test
* Update test names for consistency
* Update docs
* Set jest environment in each file
* Use root true in `with-jest` eslint config
* Ensure nested .eslintrcs are not loaded for repo lint
Co-authored-by: jj@jjsweb.site <jj@jjsweb.site>
There's been community feedback the `layouts` section of `next/image` docs could be improved. Thanks to this great article (https://blog.eyas.sh/2021/08/gatsby-to-next-js/), I've added a helpful table here giving a high-level overview, as well as re-organized the `layout` section to be more helpful.
Adding display property to the examples as just copying them shows a 'Display parameter is missing.' warning.
Also added a link to the docs.
## Documentation / Examples
- [ ] Make sure the linting passes
This adds a new ESLint rule to `eslint-plugin-next` to check that `next/script` components with inline content have the required `id` attribute.
Also adjusted the code example for inline scripts in the `next/script` docs, which were actually missing an `id` attribute.
And also updated the `next/scripts` integration test to also have the required `id` attribute.
Unsure about the required heading levels in the errors .md document (other examples have h1 and h4??)
## 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.
- [x] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes
This PR adds documentation for the new `rootDir` setting (#27918), and for `next/no-html-link-for-pages`.
## Documentation / Examples
- [x] Make sure the linting passes
