My addition of the Yarn 2 caveat was more nuanced than I thought. Apologies. @merceyz has been adding extensive e2e tests for Yarn 2 support. We plan to support Yarn 2 compat.
Reverts https://github.com/vercel/next.js/pull/21657.
Previously our automatic React injection approach injected `import React from 'react'` automatically whenever JSX was detected. The new official JSX transform solves this by enforcing importing `React` when it is used.
This codemod automatically converted files that are using a "global React variable" to use `import React from 'react'`
This single sentence addition would have saved me about a day of troubleshooting. This doc doesn't mention how the inline occurs. The only place I could eventually find that mentions this is the server & public runtime config pages.
Updates the env documentation to mention `.vercelignore` when using the Vercel CLI. Also clears up parts of the other paragraphs and updates the links as these topics now have dedicated pages in the Vercel docs.
Building off [this Slack conversation](https://vercel.slack.com/archives/CGD3XGSD7/p1597329727013900), this PR adds a top-level section to the documentation on authentication patterns.
Please provide any and all comments! A few open thoughts I have:
- ~Should this include code snippets from the related providers or stay very high-level? At what point do we delegate to the examples folder?~ Keep things high level and delegate to examples folder
- ~Should this include any related cards at the bottom?~ Added to the bottom
- ~Should other places in the documentation link back to here?~ Added link from routing
- Should it be a top-level route, or be underneath advanced?
```
images: {
domains: ['example.com'],
path: 'https://example.com/myaccount/',
},
```
Those `domains` and `path` look a lot alike for me and so, I was confused. I found out that the domains are ignored if the Loader is set, which makes sense.
Changed reference from 'master' to 'main' branch under DPS section in line with GitHub's recent switch from master to main branch as base repo branch names.
Currently if sizes is not defined, Next.js is setting sizes as:
```
(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px'
```
This pull request will make sizes be `100vw` by default, which will allow us to download "smaller" images than what's currently happening.
In a demo app I have, the difference is between downloading 488KB vs 1.4MB (in images)
We've received some feedback that the current note about calling API routes inside gSP/gSSP is confusing. This updates the wording to make it clear you can still use `fetch` in your application, and also to not say you "import" an API route. You import the _logic_ inside the route.
To clarify what I've noticed as a common source of confusion in discussions online. Fixes https://github.com/vercel/next.js/issues/19426
If you wish to know whether the code is running as part of a client-side page transition, in either `getInitialProps` or `getServerSideProps`, you can check to see if `context.req.url` starts with `/_next/data`.
- Updated some links in docs that don't have the `.md` extension. Not required for our live docs but useful for the GitHub view.
- Updated links that go to https://nextjs.org/docs to a relative path, that way they'll work for versioned docs
- Updated the `Regex Path Matching` example to be consistent with the paragraph above and with the official example in /examples.
For an API route to work, you need to `export as default a function` (a.k.a **request handler**), which then receives the following parameters:
For an API route to work, you need to `export a function as default` (a.k.a **request handler**), which then receives the following parameters:
I might be wrong though (not a native English speaker), it just sounds strange to my ears.
Building off the "Migrating to Next.js" section started, this doc provides information on using `rewrites`, `redirects`, and micro-frontends to incrementally adopt Next.js in your codebase.
Notes:
- I use "blank page" to refer to that state where a new tab is waiting for the initial HTML. Lmk if there are better words to describe that.
- I did not add an usage example because it's the same thing of `fallback: true` and `fallback: false`, but with a config change. It's also explained below them and mentions the similarity with `fallback: true`
---
Fixes#18468
This page claims that `exportPathMap` is only used by `next export`. This is somewhat misleading, as the mapping is also detected and applied during `yarn develop`. I welcome any other suggestions to make this clearer than I did in this PR.
This adds support for passing `statusCode` in a `redirect` from `getServerSideProps` or `getStaticProps` which matches the `redirect` shape allowed to be returned for `redirects` in `next.config.js`
Closes: https://github.com/vercel/next.js/issues/18350
This PR deprecates the `unsized` property from NextImage because the property did not accomplish the desired effect.
Users should rely on one of the new layouts instead:
- `<Image layout="fixed" />`
- `<Image layout="intrinsic" />`
- `<Image layout="responsive" />`
- `<Image layout="fill" />`
The `unsized` property will continue to work as-is in production but is deprecated and will throw in dev.
---
### TODO:
- [x] test `layout=fill` in typescript types
- [x] test `layout=fill` render behavior
- [x] test that `unsized` switches to `layout=fill`
- [x] test `next dev` erroring on `unsized`
- [ ] layout docs (tracked in issue #18554)
- [ ] both `layout=fill` and `layout=responsive` use all deviceWidths in the srcset
---
Fixes#18541
Co-authored-by: Steven <steven@ceriously.com>
This PR introduces a new `layout` property.
This allows 3 possible values (`fixed`, `intrinsic`, or `responsive`) which solve many use cases we have seen since 10.0.0 and will hopefully avoid usage of `unsized`.
Fixes#18351
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
This does two things:
- Rename `iconSizes` to `imageSizes`.
- Give priority to `imageSizes` regardless of `deviceSizes` as a means to opt-out of the srcset behavior.
This separates the `next.config.js` property `images.sizes` into to properties: `images.deviceSizes` and `images.iconSizes`.
The purpose is for images that are not intended to take up the majority of the viewport.
Related to #18122
* Add initial i18n documentation
* Apply suggestions from code review
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
* Apply suggestions from code review
Co-authored-by: Lee Robinson <me@leerob.io>
* Apply more suggestions
* rephrase a bit more
* Update doc
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Noticed that most of our mentions to Data Fetching are capitalized in both words, but the page itself wasn't. And it's not consistent with the titles in other sections
Noticed there's an extra backslash in the example which causes an error.
**EDIT:**
Also the promise needs to be resolved using `.toString()` before it can be returned as `content` in props.
Related issue: https://github.com/vercel/next.js/issues/10647#issuecomment-623703149
Sometimes we have both Yarn and NPM installed and want to explicitly bootstrap an app with the CLI using NPM. Having this flag documented could help people understand the package manager behavior and select NPM if that's their preference.
Fixes https://github.com/vercel/next.js/issues/17828.
This change adds a caveat to both the "Custom `App`" and "Custom `Document`" pages about how both `getStaticProps` and `getServerSideProps` aren't supported.
Reflect the change in `trailingSlash` parameter name.
I found this because of the great warning on the build!
```
Warning: The "exportTrailingSlash" option has been renamed to "trailingSlash". Please update your next.config.js.
```
This comes up a lot in discussions/as an issue, so added a small comment about uploading files to the public directory. I'm not sure if it is worth a deeper technical explanation as well.
This continues off of https://github.com/vercel/next.js/pull/17081 and provides this normalized `asPath` value in the context provided to `getServerSideProps` to provide the consistent value since the request URL can vary between direct visit and client transition and the alternative requires building the URL each time manually.
Kept this change separate from https://github.com/vercel/next.js/pull/17081 since this is addressing a separate issue and allows discussion separately.
Closes: https://github.com/vercel/next.js/issues/16407
Closes https://github.com/vercel/next.js/issues/16633
- The docs and examples that use `as` have been updated to show how `href` can be used to get the same results
- Added new examples and provided more details on current examples for more details on how `href` can be used.
**Note:** With this change the usage of `as` becomes completely unrequired as I failed to find a good use case for it. Therefore documentation for `as` now includes: `Used for dynamic routes before Next.js 9.5.3`. But that should link to somewhere, either to a blog post or to the Upgrade Guide in our docs.
Goals of this PR:
- Explain `import()` first without mentioning `next/dynamic`, because `next/dynamic` in our API and **Dynamic Import** is a ES feature. This should avoid a common confusion in our users thinking that one can't be used without the other.
- Mention how `next/dynamic` can be used with **Dynamic Imports** to load react components.
- Updated example to include fuzzy search using a dynamic import.
Potential change: Leave the page to be about `import()` and move `next/dynamic` to the API reference (alongside `next/link`, `next/router`, etc.)
Closes https://github.com/vercel/next.js/pull/16299
Closes https://github.com/vercel/next.js/issues/15711
* Include yarn instructions
Yarn seems like it's encouraged elsewhere (such as in create-next-app docs), so adding this to clarify it's supported here.
* Added to a similar case
Co-authored-by: Luis Alvarez D <luis@vercel.com>
* Document req and res
* lint fix
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Following up from #14830, this PR adds a new page to the docs for Create Next App. The content is identical to the README created as part of #14830.
Also added a link on the main `getting-started` page to the new docs for Create Next App to help users find more info on Create Next App if needed.
I'm unsure as to whether the content for the documentation needs to be different from the one I wrote for the README. Please let me know if that's the case, and I will be happy to tweak the structure.
While it is mentioned in the [link documentation](https://nextjs.org/docs/api-reference/next/link), I think it is useful to also explain in the dynamic route documentation that you need to include the as parameter when routing to a dynamic route/
Fixes https://github.com/vercel/next.js/issues/15595
- Updated the tailwindcss and tailwindcss-emotion examples to the latest version of tailwindcss
- Added a new `with-styled-jsx` example
- Updated the `basic-css` example to use CSS Modules instead of styled-jsx
- Added the examples to the documentation page for built-in css support
Fixes a broken link on https://nextjs.org/docs/routing/dynamic-routes
This path was updated from `pages/docs/[...slug].js` to `pages/docs/[[...slug]].js`, so I've updated the link and moved that example down to the "Optional catch all routes" section.
Fixes: #13512
Defined and exported type for `metric` used in [reportWebVitals](https://nextjs.org/docs/advanced-features/measuring-performance)
```
export function reportWebVitals(metric) {
if (metric.label === 'custom') {
console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
}
}
```
One can now do
```
import { NextWebVitalsMetric } from 'next/app'
export function reportWebVitals(metric: NextWebVitalsMetric ) {
if (metric.label === 'custom') {
console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
}
}
```
[ch4109]
Closes https://github.com/vercel/next.js/issues/14500
Our current docs for `next/router` use examples from both `useRouter` and `import Router from 'next/router'`, with this PR I'm unifying the API into `useRouter` (`withRouter` is still going to be mentioned multiple times as it is the HOC alternative) and no longer mentioning that you can import a global `Router` object from `next/router`, not sure if I should mention it at least once but that didn't seem to be required.
I also did some structural changes to the docs for `next/router`, now every method starts with a description, then the implementation and explanation of the parameters of the method, and then the usage example, because every method uses the same `Usage` title the hash for them would be something like `#usage`, `#usage-1`, `#usage-2`, e.t.c, so I'm not very happy with this but it looks good.
Feedback wanted 🙏
* added graphcms
* Updated readme and environment variables
* Removed gitignore
* Updated tailwind config
* Some fixes in pages
* Updated api endpoints
* lint fix
* Updated readme
* Updated og image
* Updated cms examples to include this one
* Added example to docs
* Added preview demo link
* Updated step
Co-authored-by: Luis Alvarez <luis@vercel.com>
I added the commented code with the `AppContext` type to match the example from the [Custom App](https://nextjs.org/docs/advanced-features/custom-app) page. But since this is the TS page I think we could remove these comments and use a clean example, what do you think? 🤔
* Add Cosmic CMS Example
* with native .env support, this file isn't needed anymore
* FIX use path alias
* Add cosmicjs package
* Fix alias import in pages/api/preview
* Added: react-imgix & lazysizes package
* Load lazysizes in layout
* Used imgix image with lazyloading
* Added avatar imgix optimizations
* EDITED: steps to install content, preview
* EDITED: demo link
* EDITED: Install step
* EDITED: preview link steps
* Edited: demo link
* FIXED: object_slug
* Screenshots
* Fixed object_slug link
* Update README.md
* Fix: formatting issue
* Updated readme and renamed .env to env.local
* Sanity checks
* Handle fallback data when expected
* Added link to the example in other examples
* Updated demo deployment
* Added example to docs
* minor lint fix
* Remove manual download step
* use vercel.json
Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>
Co-authored-by: Luis Alvarez <luis@vercel.com>
The current [with-polyfills](https://github.com/vercel/next.js/blob/canary/examples/with-polyfills/) example is not the suggested way to add polyfills and is known to cause issues with bundling.
The proper way to load polyfills is to include them as the first line in `pages/_app.js`, which I've updated the docs to say.
When reading
"In order to expose a variable to the browser you can prefix the variable with NEXT_PUBLIC_. For example:"
I thought that I could maybe use something else than NEXT_PUBLIC_. I guess "have to" or similar would be better here, let me know
The [docs for customising the PostCSS config](https://nextjs.org/docs/advanced-features/customizing-postcss-config) warn the user they will need to manually install any dependencies that Next.JS will implicitly use if the config is not overridden. `postcss-preset-env` is missing from the install command.
