From 58598e1522bc5e25ee0fe3f4c3482e7fb57ebb69 Mon Sep 17 00:00:00 2001 From: Konstantinos Leimonis <1969742+leimonio@users.noreply.github.com> Date: Tue, 6 Jul 2021 19:02:12 +0100 Subject: [PATCH] Add example notion (#1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [WIP] Add cms notion integration example - index page * Add cover images for pages * Add post page * Remove preview functionality * Add module.exports to security headers documentation (#26466) Without `module.exports`, the provided code won't work if just pasted into `next.config.js` ## Documentation / Examples - [x] Make sure the linting passes * fix: ignore invalid accept-language header (#26476) Fixes #22329 ## Bug - [x] Related issues linked using fixes #22329 - [x] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes * chore: Add Alex to lint documentation (#26354) This Pull Request adds [Alex](https://alexjs.com/) to our documentation. It catches insensitive, inconsiderate writing. The original PR (https://github.com/vercel/next.js/pull/25821) is too large so I have decided to break it down into smaller PRs. This PR is the first part. Then I will continue to add the rest of the documentation in smaller PRs. ## More Information on Alex: https://alexjs.com/ https://github.com/get-alex/alex ## Documentation / Examples - [x] Make sure the linting passes * Fix domain locales not available on client (#26083) * bug: Fix domain locales not available on client * Add test case * update tests Co-authored-by: JJ Kasper * Update to only add image import types when enabled (#26485) * Update to only add image import types when enabled * add type check to test * Update i18n fields in docs (#26492) Closes: https://github.com/vercel/next.js/issues/24991 ## Documentation / Examples - [x] Make sure the linting passes * v11.0.1-canary.7 * Strongly type `Router.events.on` and `Router.events.off` (#26456) This strongly types `Router.events.on` and `Router.events.off`. Previously the event type was `string` but now it's `'routeChangeStart' | 'beforeHistoryChange' | 'routeChangeComplete' | 'routeChangeError' | 'hashChangeStart' | 'hashChangeComplete'` ## Bug - ~[ ] Related issues linked using `fixes #number`~ - [x] Integration tests added Closes #25679 Closes #23753 Closes #15497 * Update next Link & Image components * Ensure image-types file is included (#26495) * Update react & react-dom to v17 * Update tailwind to use jit * v11.0.1-canary.8 * v11.0.1 * Don't test image domains in test env (#26502) fixes #21549 Co-authored-by: JJ Kasper * docs: updated minimum Node.js version (#26528) ## Documentation / Examples - [x] Make sure the linting passes According to new requirements in `package.json` minimum Node.js version for now is 12.0 * Update next-env note in docs (#26536) This ensures we don't recommend editing the `next-env` file since we need to be able to tweak it to accept future types we add in Next.js ## Documentation / Examples - [x] Make sure the linting passes Closes: https://github.com/vercel/next.js/issues/26533 * [examples] Fix ssr-caching example. (#26540) Closes https://github.com/vercel/next.js/issues/12019 with a better example of proper SSR caching. * Fix props not updating when changing the locale and keeping hash (#26205) Currently, there is only a `hashChangeStart` and subsequent `hashChangeComplete` event and no props update (which would be used to get translations, etc.). Happy for any feedback fixes #23467 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes * Add note about adding additional types (#26545) * Add note about adding additional types * Update to bold edit also * Apply suggestions from code review Co-authored-by: Steven * Allow user to override next-image-loader (#26548) In PR #26281, we solved one use case but broke another. This PR will allow the user to [override the built-in loader](https://github.com/vercel/next.js/pull/26281#issuecomment-866251944) via custom webpack config. * v11.0.2-canary.0 * chore: Enable Alex documentation linting for error pages (#26526) * Update SWR example to include fetcher function. (#26520) * Previous example doesn't work * Apply suggestions from code review * Update docs/basic-features/data-fetching.md * lint-fix Co-authored-by: Lee Robinson Co-authored-by: JJ Kasper * tailwind examps upgraded to v2.2 (#26549) ## Documentation / Examples - [x] Make sure the linting passes * doc: prettify docs for next script (#26572) x-ref: https://github.com/vercel/next.js/pull/26518#issuecomment-867566010 ## Documentation / Examples - [x] Make sure the linting passes * Add logging when a custom babelrc is loaded (#26570) Partially solves #26539 by adding back the log output when a config file is used ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes * Add comment to not edit in next-env file (#26573) This adds a comment to the generated `next-env.d.ts` to mention it should not be edited pointing to the documentation which contains an example of adding custom types separately. x-ref: https://github.com/vercel/next.js/issues/26560 ## Documentation / Examples - [x] Make sure the linting passes * Separate node polyfill test from basic suite (#26550) * Separate node polyfill test from basic suite * update test * fix with-loading example for next 11 (#26569) ## Documentation / Examples - [X] Make sure the linting passes This PR updates the with-loading example to follow the documentation of router events for next 11 * v11.0.2-canary.1 * Add trace url on bootup (#26594) * Add trace url on bootup * Update whitelist -> accesslist * Add name to webpack-invalidated * v11.0.2-canary.2 * Add check for ObjectExpression when iterating on tags for font optimization (#26608) Fixes #26547 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes * Enable Alex documentation linting for docs (#26598) * Add link to live demo already hosted (#25718) * Add link to live demo already hosted To make it easier for people to simply see the live example without having to deploy a whole new project * update link Co-authored-by: JJ Kasper * Update next/image docs for relative parent with layout=fill. (#26615) https://github.com/vercel/next.js/discussions/18739#discussioncomment-435925 * Fix GSP redirect cache error (#26627) This makes sure we don't attempt flushing cache info to disk for `getStaticProps` `redirect` items with `revalidate` Fixes: https://github.com/vercel/next.js/issues/20816 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added * Correct statusCode when visiting _error directly (#26610) This fixes non-stop reloading when visiting `_error` directly in development caused by the `statusCode` being 200 unexpectedly while HMR returns the page as `invalid` which triggers `on-demand-entries` to reload the page. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added Fixes: https://github.com/vercel/next.js/issues/8036 x-ref: https://github.com/vercel/next.js/pull/8033 * fix: next dynamic with jest (#26614) Fixes #19862 Avoid executing `webpack` property on `loadableGenerated` of loadable component compiled from `next/dynamic` when `require.resolveWeak` is unavailable due to jest runtime missing `require.resolveWeak`. ## Bug - [x] Related issues linked using `fixes #number` - [x] unit tests added * Ensure API routes are not available under the locale (#26629) This ensures API routes are not available under the locale path since API routes don't need to be localized and we don't provide the locale to the API in any way currently so the user wouldn't be aware if the localized API route was visited instead of the non-localized. Fixes: https://github.com/vercel/next.js/issues/25790 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added * v11.0.2-canary.3 * Fix image content type octet stream 400 (#26705) Fixes #23523 by adding image content type detection ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added * Update layouts example to persist state across client-side transitions. (#26706) * Update layouts example * Update examples/layout-component/components/layout.js Co-authored-by: JJ Kasper * Fix typo on "occured" to "occurred" (#26709) * fix: typo occured -> occurred * fix: typo occured -> occurred * fix: typo occured -> occurred * fix: typo occured -> occurred * lint-fix Co-authored-by: JJ Kasper * [ESLint] Adds --max-warnings flag to `next lint` (#26697) Adds `--max-warnings` flag to `next lint` to enable setting of a maximum warning threshold. Fixes #26671 * update with-redux-toolkit-typescript (#26714) ## Bug - [X] Related issues linked using `fixes #26713 ` ## 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. ## Documentation / Examples - [X] Make sure the linting passes ## Screenshots After this small change the warning disappears. ![image](https://user-images.githubusercontent.com/47717492/123749377-fd56fb80-d8d2-11eb-8b70-dbb7f6f16050.png) * Simplify `next-dev-server` implementation (#26230) `next-dev-server` having its own implementations of `renderToHTML` and `renderErrorToHTML` has historically made reasoning about streaming hard, as it adds additional places where status codes are explicitly set and the full HTML is blocked on. Instead, this PR simplifies things considerably by moving the majority of the custom logic for e.g. hot reloading and on-demand compilation to when we're resolving the page to be loaded, rather than upfront when handling the request. It also cleans up a few other details (e.g. default error page rendering) that managed to creep into the base implementation over time. One unfortunate side effect is that this makes compilation errors slightly more difficult. Previously, we'd render them directly. Now, we have to rethrow them. But since they've already been logged (by the watch pipeline), we have to make sure they don't get logged again. * Update PR labeler action * Simplify stats action (#26751) * Move code shared between server/client to "shared" folder (#26734) * Move next-server directory files to server directory (#26756) * Move next-server directory files to server directory * Update tests * Update paths in other places * Support new hydrate API in latest react 18 alpha release (#26664) * fix: react 18 new hydration API * support react 18 * compat latest react only, fix resolved version * fix tests * Some changes based on https://github.com/reactwg/react-18/discussions/5 * fix test Co-authored-by: Tim Neutkens Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Disable build-output size specific tests (#26769) * Disable build-output size specific tests * remove size-limit test * lint-fix * Add upstream `max-age` to optimized image (#26739) This solves the main use case from Issue #19914. Previously, we would set the `Cache-Control` header to a constant and rely on the server cache. This would mean the browser would always request the image and the server could response with 304 Not Modified to omit the response body. This PR changes the behavior such that the `max-age` will propagate from the upstream server to the Next.js Image Optimization Server and allow browser caching. ("upstream" meaning external server or just an internal route to an image) This PR does not change the `max-age` for static imports which will remain `public, max-age=315360000, immutable`. #### Pros: - Fewer HTTP requests after initial browser visit - User configurable `max-age` via the upstream image `Cache-Control` header #### Cons: - ~~Might be annoying for `next dev` when modifying a source image~~ (solved: use `max-age=0` for dev) - Might cause browser to cache longer than expected (up to 2x longer than the server cache if requested in the last second before expiration) ## Bug - [x] Related issues linked using `fixes #number` * Fix blurred image position when using objectPosition (#26590) ## Bug fixes #26309 ## Documentation / Examples see #26309 - [ ] Make sure the linting passes * Update azure tests (#26779) * Stabilize relay-analytics test (#26782) * Leverage blocked page for _error (#26748) ## Enhance simplify detection for visiting `_error` x-ref: #26610 * Update codeowners to add new maintainers (#26770) * examples: fix typo `lunix` → `linux` (#26796) ## Bug - [ ] ~~Related issues linked using `fixes #number`~~ - [ ] ~~Integration tests added~~ ## 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.~~ ## Documentation / Examples - [x] Make sure the linting passes * Update repo scripts to separate folder (#26787) * fix: detect loop in client error page (#26567) Co-authored-by: Tobias Koppers Co-authored-by: Tim Neutkens * Update snapshot for font-optimization test (#26823) This fixes the `font-optimization` test failing from the links/content changing slightly in the snapshot. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes * Add `onLoadingComplete()` prop to Image component (#26824) This adds a new prop, `onLoadingComplete()`, to handle the most common use case of `ref`. I also added docs and a warning when using `ref` so we recommend the new prop instead. - Fixes #18398 - Fixes #22482 * Add "Vary: Accept" header to /_next/image responses (#26788) This pull request adds "Vary: Accept" header to responses from the image optimizer (i.e. the /_next/image endpoint). The image optimizer prefers re-encoding JPG files to WebP, but some browsers (such as Safari 14 on Catalina) do not yet support WebP. In such cases the optimizer uses the Accept header sent by the browser to send out a JPG response. Thus the optimizer's response may depend on the Accept header. Potential caching proxies can be informed of this fact by adding "Vary: Accept" to the response headers. Otherwise WebP data may be served to browsers that do not support it, for example in the following scenario: * A browser that supports WebP requests the JPG. The optimizer re-encodes it to WebP. The proxy caches the WebP data. * After this another browser that doesn't support WebP requests the JPG. The proxy sends the WebP data to the browser. - [x] Integration tests added - [x] Make sure the linting passes * Fix using-preact example deps (#26821) Fix after https://github.com/vercel/next.js/pull/26133 * Add additional tests for image type detection (#26832) Adding additional tests. Follow up to #26705 * Fix immutable header for image with static import & unoptimized (#26836) Fixes #26587 * Update `publish-canary` script to include checkout (#26840) * Update `publish-canary` script to include checkout * Update contrib with publishing section * v11.0.2-canary.4 * Make sure 404 pages do not get cached by a CDN when using next start (#24983) Co-authored-by: Jiachi Liu Co-authored-by: JJ Kasper * Update to environment-variable.md (#26863) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## 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. ## Documentation / Examples - [ ] Make sure the linting passes ## Why the change I lost quite a few hours figuring out why my environment variable was `undefined` in the browser. I read about the built-in support and was like: "Oh nice" and didn't read much further. I missed the part about how you need to prefix your variables with `NEXT_PUBLIC_` in order to expose them to the browser. I think a hint to this in the anchor link to that section will make it more discoverable as it's then mentioned near the top and will save people who are like me some time and a headache. * Don't emit duplicate image files (#26843) fixes #26607 This change makes it so the image loader plugin only emits a file while processing an image import for the client. The final generated image URL was already the same in SSR and CSR anyway, so this change doesn't have any functional impact. I also changed the name of the static page in the image component tests, since it was causing some conflicts with the static assets folder. * Add instructions on how to add nextjs.org/docs/messages urls (#26865) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Rename example folder to with-notion * Update references of example * Reorder docs manifest and rename to Script Optimization. (#26874) So there's _conformance_ between the other docs / optimizations. * Fix typo on "occured" to "occurred" (#26876) - Fix typo on "occured" to "occurred" * Update README Co-authored-by: Sam Robbins Co-authored-by: Jiachi Liu Co-authored-by: Peter Mekhaeil <4616064+petermekhaeil@users.noreply.github.com> Co-authored-by: Rob Vermeer Co-authored-by: JJ Kasper Co-authored-by: Brandon Bayer Co-authored-by: Alex Castle Co-authored-by: Vitaly Baev Co-authored-by: Lee Robinson Co-authored-by: destruc7i0n <6181960+destruc7i0n@users.noreply.github.com> Co-authored-by: Steven Co-authored-by: Joshua Byrd Co-authored-by: Pranav P Co-authored-by: Tim Neutkens Co-authored-by: John Co-authored-by: Tim Neutkens Co-authored-by: Vadorequest Co-authored-by: hiro Co-authored-by: Houssein Djirdeh Co-authored-by: Soham Shah <47717492+sohamsshah@users.noreply.github.com> Co-authored-by: Gerald Monaco Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Nils Schönwald Co-authored-by: D. Kasi Pavan Kumar <44864604+kasipavankumar@users.noreply.github.com> Co-authored-by: Tobias Koppers Co-authored-by: Joachim Viide Co-authored-by: Artur Sedlukha Co-authored-by: Paul van den Dool Co-authored-by: hiro --- .alexignore | 2 + .alexrc | 21 + .github/CODEOWNERS | 6 +- .github/labeler.json | 11 +- .github/pull_request_template.md | 2 + .github/workflows/build_test_deploy.yml | 8 +- azure-pipelines.yml | 67 +- contributing.md | 20 +- docs/advanced-features/codemods.md | 2 +- docs/advanced-features/custom-app.md | 2 +- docs/advanced-features/debugging.md | 2 +- docs/advanced-features/dynamic-import.md | 2 +- docs/advanced-features/i18n-routing.md | 3 + docs/advanced-features/multi-zones.md | 2 +- docs/advanced-features/security-headers.md | 22 +- docs/advanced-features/static-html-export.md | 2 +- docs/api-reference/cli.md | 2 +- docs/api-reference/create-next-app.md | 2 +- .../next.config.js/introduction.md | 4 +- docs/api-reference/next/image.md | 7 +- docs/api-reference/next/link.md | 2 +- docs/api-reference/next/router.md | 3 +- docs/basic-features/data-fetching.md | 14 +- docs/basic-features/environment-variables.md | 2 +- docs/basic-features/pages.md | 4 +- docs/basic-features/script.md | 74 +- docs/basic-features/typescript.md | 6 +- docs/deployment.md | 4 +- docs/getting-started.md | 2 +- docs/manifest.json | 8 +- docs/migrating/incremental-adoption.md | 2 +- docs/upgrading.md | 2 +- errors/api-routes-static-export.md | 2 +- errors/can-not-output-to-public.md | 2 +- errors/can-not-output-to-static.md | 2 +- errors/future-webpack5-moved-to-webpack5.md | 2 +- errors/next-start-serverless.md | 2 +- errors/prefetch-true-deprecated.md | 2 +- errors/static-dir-deprecated.md | 2 +- errors/template.md | 13 + examples/image-component/README.md | 4 + examples/layout-component/README.md | 2 +- .../layout-component/components/layout.js | 35 +- .../components/layout.module.css | 9 + .../layout-component/components/sidebar.js | 19 + .../components/sidebar.module.css | 39 + examples/layout-component/global.css | 12 + examples/layout-component/pages/_app.js | 8 + examples/layout-component/pages/about.js | 37 +- examples/layout-component/pages/contact.js | 37 +- examples/layout-component/pages/index.js | 39 +- examples/ssr-caching/README.md | 23 +- examples/ssr-caching/package.json | 7 +- examples/ssr-caching/pages/blog/[id].js | 26 - examples/ssr-caching/pages/index.js | 38 +- examples/ssr-caching/server.js | 43 - examples/using-preact/package.json | 4 +- .../with-env-from-next-config-js/README.md | 2 +- examples/with-loading/pages/_app.js | 32 +- examples/with-notion/.env.local.example | 2 + examples/with-notion/.gitignore | 34 + examples/with-notion/README.md | 137 ++ examples/with-notion/components/avatar.js | 17 + examples/with-notion/components/container.js | 3 + .../with-notion/components/cover-image.js | 28 + examples/with-notion/components/date.js | 3 + examples/with-notion/components/footer.js | 30 + examples/with-notion/components/header.js | 12 + examples/with-notion/components/hero-post.js | 37 + examples/with-notion/components/intro.js | 28 + examples/with-notion/components/layout.js | 14 + .../components/markdown-styles.module.css | 18 + examples/with-notion/components/meta.js | 42 + .../with-notion/components/more-stories.js | 24 + examples/with-notion/components/post-body.js | 11 + .../with-notion/components/post-header.js | 26 + .../with-notion/components/post-preview.js | 31 + examples/with-notion/components/post-title.js | 7 + .../components/section-separator.js | 3 + examples/with-notion/lib/api.js | 29 + examples/with-notion/lib/constants.js | 5 + examples/with-notion/next.config.js | 5 + examples/with-notion/package.json | 23 + examples/with-notion/pages/_app.js | 7 + examples/with-notion/pages/_document.js | 15 + examples/with-notion/pages/api/posts.js | 73 + examples/with-notion/pages/index.js | 43 + examples/with-notion/pages/posts/[slug].js | 73 + examples/with-notion/postcss.config.js | 18 + .../0f5a110c-7e12-4bc3-8f5e-b207c29eeedb.jpeg | Bin 0 -> 190878 bytes .../538d7d3a-6efb-48cd-84fd-6da8700a12a8.jpeg | Bin 0 -> 59229 bytes .../b73b3510-6d65-44ae-8986-3d5c47294780.jpeg | Bin 0 -> 118218 bytes .../c79aa391-769e-4459-94f6-cdebeac99e67.jpeg | Bin 0 -> 57649 bytes .../f2cb7687-4340-4fc8-aa5a-91236d5e767f.jpeg | Bin 0 -> 26275 bytes .../public/favicon/android-chrome-192x192.png | Bin 0 -> 4795 bytes .../public/favicon/android-chrome-512x512.png | Bin 0 -> 14640 bytes .../public/favicon/apple-touch-icon.png | Bin 0 -> 1327 bytes .../public/favicon/browserconfig.xml | 9 + .../public/favicon/favicon-16x16.png | Bin 0 -> 595 bytes .../public/favicon/favicon-32x32.png | Bin 0 -> 880 bytes .../with-notion/public/favicon/favicon.ico | Bin 0 -> 15086 bytes .../public/favicon/mstile-150x150.png | Bin 0 -> 3567 bytes .../public/favicon/safari-pinned-tab.svg | 33 + .../public/favicon/site.webmanifest | 19 + examples/with-notion/styles/index.css | 5 + examples/with-notion/tailwind.config.js | 34 + examples/with-notion/types/author.json | 18 + examples/with-notion/types/post.json | 52 + .../next-env.d.ts | 1 + .../package.json | 2 +- .../components/ElementsForm.tsx | 6 +- .../with-tailwindcss-emotion/package.json | 6 +- examples/with-tailwindcss/README.md | 2 +- examples/with-tailwindcss/package.json | 6 +- lerna.json | 2 +- package.json | 9 +- packages/create-next-app/README.md | 2 +- packages/create-next-app/package.json | 2 +- packages/eslint-config-next/package.json | 4 +- packages/eslint-plugin-next/package.json | 2 +- packages/next-bundle-analyzer/package.json | 2 +- packages/next-codemod/package.json | 2 +- packages/next-env/package.json | 2 +- packages/next-mdx/package.json | 2 +- packages/next-plugin-storybook/package.json | 2 +- packages/next-plugin-storybook/preset.js | 2 +- packages/next-polyfill-module/package.json | 2 +- packages/next-polyfill-nomodule/package.json | 2 +- packages/next/amp.d.ts | 2 +- packages/next/amp.js | 2 +- packages/next/bin/next.ts | 2 +- .../next/build/babel/loader/get-config.ts | 19 +- packages/next/build/babel/plugins/commonjs.ts | 4 +- .../build/babel/plugins/next-page-config.ts | 2 +- .../build/babel/plugins/next-ssg-transform.ts | 5 +- packages/next/build/entries.ts | 8 +- packages/next/build/index.ts | 26 +- packages/next/build/utils.ts | 22 +- packages/next/build/webpack-config.ts | 76 +- packages/next/build/webpack/config/index.ts | 2 +- packages/next/build/webpack/config/utils.ts | 2 +- .../webpack/loaders/next-babel-loader.js | 4 +- .../webpack/loaders/next-image-loader.js | 7 +- .../next-serverless-loader/api-handler.ts | 2 +- .../loaders/next-serverless-loader/index.ts | 10 +- .../next-serverless-loader/page-handler.ts | 23 +- .../loaders/next-serverless-loader/utils.ts | 37 +- .../webpack/plugins/build-manifest-plugin.ts | 8 +- .../font-stylesheet-gathering-plugin.ts | 36 +- .../plugins/next-drop-client-page-plugin.ts | 2 +- .../nextjs-require-cache-hot-reloader.ts | 4 +- .../plugins/nextjs-ssr-module-cache.ts | 2 +- .../webpack/plugins/pages-manifest-plugin.ts | 4 +- .../build/webpack/plugins/profiling-plugin.ts | 6 +- packages/next/build/write-build-id.ts | 2 +- packages/next/cli/next-lint.ts | 18 +- packages/next/client/image.tsx | 68 +- packages/next/client/index.tsx | 53 +- packages/next/client/link.tsx | 2 +- packages/next/client/next-dev.js | 2 +- packages/next/client/page-loader.ts | 8 +- packages/next/client/route-loader.ts | 2 +- packages/next/client/router.ts | 11 +- packages/next/client/script.tsx | 2 +- packages/next/client/with-router.tsx | 2 +- packages/next/compiled/webpack/bundle4.js | 120 +- packages/next/config.d.ts | 4 +- packages/next/config.js | 2 +- packages/next/constants.d.ts | 2 +- packages/next/constants.js | 2 +- packages/next/dynamic.d.ts | 4 +- packages/next/dynamic.js | 2 +- packages/next/export/index.ts | 8 +- packages/next/export/worker.ts | 24 +- packages/next/head.d.ts | 4 +- packages/next/head.js | 2 +- packages/next/image-types/global.d.ts | 62 + packages/next/lib/eslint/runLintCheck.ts | 19 +- packages/next/lib/load-custom-routes.ts | 4 +- .../typescript/writeAppTypeDeclarations.ts | 31 +- packages/next/lib/verifyTypeScriptSetup.ts | 3 +- packages/next/package.json | 15 +- packages/next/pages/_app.tsx | 2 +- packages/next/pages/_document.tsx | 13 +- packages/next/pages/_error.tsx | 4 +- .../{next-server => }/server/api-utils.ts | 2 +- .../{next-server => }/server/config-shared.ts | 2 +- .../server/config-utils-worker.ts | 6 +- .../{next-server => }/server/config-utils.ts | 4 +- .../next/{next-server => }/server/config.ts | 8 +- .../{next-server => }/server/crypto-utils.ts | 0 .../server/denormalize-page-path.ts | 0 .../next/server/{ => dev}/hot-middleware.ts | 0 .../next/server/{ => dev}/hot-reloader.ts | 35 +- .../next/server/{ => dev}/next-dev-server.ts | 153 +-- .../{ => dev}/on-demand-entry-handler.ts | 13 +- .../server/{ => dev}/static-paths-worker.ts | 8 +- .../{next-server => }/server/font-utils.ts | 4 +- .../server/get-page-files.ts | 0 .../server/get-route-from-entrypoint.ts | 2 +- .../{next-server => }/server/image-config.ts | 0 .../server/image-optimizer.ts | 165 ++- .../server/incremental-cache.ts | 10 +- packages/next/server/lib/find-page-file.ts | 2 +- .../server/lib/recursive-readdir-sync.ts | 0 .../server/lib/squoosh/LICENSE | 0 .../server/lib/squoosh/codecs.ts | 0 .../server/lib/squoosh/emscripten-utils.ts | 0 .../server/lib/squoosh/image_data.ts | 0 .../server/lib/squoosh/impl.ts | 0 .../server/lib/squoosh/main.ts | 2 +- .../lib/squoosh/mozjpeg/mozjpeg_node_dec.js | 0 .../lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm | Bin .../lib/squoosh/mozjpeg/mozjpeg_node_enc.js | 0 .../lib/squoosh/mozjpeg/mozjpeg_node_enc.wasm | Bin .../server/lib/squoosh/png/squoosh_oxipng.js | 0 .../lib/squoosh/png/squoosh_oxipng_bg.wasm | Bin .../server/lib/squoosh/png/squoosh_png.js | 0 .../lib/squoosh/png/squoosh_png_bg.wasm | Bin .../lib/squoosh/resize/squoosh_resize.js | 0 .../lib/squoosh/resize/squoosh_resize_bg.wasm | Bin .../server/lib/squoosh/rotate/rotate.wasm | Bin .../server/lib/squoosh/text-decoder.ts | 0 .../server/lib/squoosh/webp/webp_node_dec.js | 0 .../lib/squoosh/webp/webp_node_dec.wasm | Bin .../server/lib/squoosh/webp/webp_node_enc.js | 0 .../lib/squoosh/webp/webp_node_enc.wasm | Bin .../server/load-components.ts | 7 +- .../{next-server => }/server/next-server.ts | 142 +- packages/next/server/next.ts | 15 +- .../server/node-polyfill-fetch.js | 0 .../server/normalize-page-path.ts | 0 .../{next-server => }/server/optimize-amp.ts | 0 .../next/{next-server => }/server/render.tsx | 36 +- .../next/{next-server => }/server/require.ts | 6 +- .../next/{next-server => }/server/router.ts | 10 +- .../{next-server => }/server/send-payload.ts | 2 +- .../{next-server => }/server/serve-static.ts | 0 .../next/{next-server => }/server/utils.ts | 2 +- .../lib/amp-context.ts | 0 .../next/{next-server => shared}/lib/amp.ts | 0 .../{next-server => shared}/lib/constants.ts | 2 +- .../lib/document-context.ts | 0 .../{next-server => shared}/lib/dynamic.tsx | 0 .../lib/head-manager-context.ts | 0 .../next/{next-server => shared}/lib/head.tsx | 0 .../lib/i18n/detect-domain-locale.ts | 0 .../lib/i18n/detect-locale-cookie.ts | 0 .../lib/i18n/normalize-locale-path.ts | 0 .../lib/loadable-context.ts | 0 .../{next-server => shared}/lib/loadable.d.ts | 0 .../{next-server => shared}/lib/loadable.js | 3 +- .../next/{next-server => shared}/lib/mitt.ts | 10 +- .../lib/post-process.ts | 0 .../lib/router-context.ts | 0 .../lib/router/router.ts | 15 +- .../router/utils/escape-path-delimiters.ts | 0 .../lib/router/utils/format-url.ts | 0 .../router/utils/get-asset-path-from-route.ts | 0 .../router/utils/get-route-from-asset-path.ts | 0 .../lib/router/utils/index.ts | 0 .../lib/router/utils/is-dynamic.ts | 0 .../lib/router/utils/parse-relative-url.ts | 0 .../lib/router/utils/path-match.ts | 0 .../lib/router/utils/prepare-destination.ts | 0 .../lib/router/utils/querystring.ts | 0 .../lib/router/utils/resolve-rewrites-noop.ts | 0 .../lib/router/utils/resolve-rewrites.ts | 0 .../lib/router/utils/route-matcher.ts | 0 .../lib/router/utils/route-regex.ts | 0 .../lib/router/utils/sorted-routes.ts | 0 .../lib/runtime-config.ts | 0 .../lib/side-effect.tsx | 0 .../{next-server => shared}/lib/to-base-64.ts | 0 .../next/{next-server => shared}/lib/utils.ts | 8 +- packages/next/taskfile-babel.js | 34 +- packages/next/taskfile.js | 22 +- packages/next/telemetry/events/version.ts | 4 +- .../telemetry/trace/report/to-telemetry.ts | 4 +- .../next/telemetry/trace/report/to-zipkin.ts | 19 +- packages/next/types/global.d.ts | 60 - packages/next/types/index.d.ts | 9 +- packages/react-dev-overlay/package.json | 2 +- packages/react-refresh-utils/package.json | 2 +- .../check-examples.sh | 2 - .../check-pre-compiled.sh | 0 scripts/next-with-deps.sh | 39 + .../publish-release.sh | 0 release-stats.sh => scripts/release-stats.sh | 0 test-pnp.sh => scripts/test-pnp.sh | 0 skip-docs-change.js | 11 +- test/.stats-app/stats-config.js | 25 +- test/integration/404-page/test/index.test.js | 69 + test/integration/basic/test/index.test.js | 46 - .../build-output/test/index.test.js | 38 +- .../client-navigation/test/index.test.js | 56 +- .../pages/_error.js | 12 + .../pages/index.js | 20 + .../test/index.test.js | 30 + .../integration/eslint/max-warnings/.eslintrc | 8 + .../eslint/max-warnings/pages/about.js | 8 + .../eslint/max-warnings/pages/index.js | 8 + test/integration/eslint/test/index.test.js | 39 + .../test/index.test.js | 6 +- .../fallback-modules/test/index.test.js | 12 +- .../pages/_document.js | 24 + .../spread-operator-regression/pages/index.js | 3 + .../with-google/manifest-snapshot.json | 6 +- .../font-optimization/test/index.test.js | 6 + .../test/index.test.js | 2 +- .../getserversideprops/pages/index.js | 2 +- .../pages/gsp-blog-blocking/[post].js | 86 ++ .../gssp-redirect/pages/gsp-blog/[post].js | 12 + .../gssp-redirect/test/index.test.js | 99 +- .../i18n-support-base-path/pages/index.js | 1 + .../next.config.js | 6 + .../pages/about.js | 27 + .../pages/posts/[...slug].js | 43 + .../test/index.test.js | 81 ++ test/integration/i18n-support/pages/index.js | 1 + .../i18n-support/test/index.test.js | 22 + test/integration/i18n-support/test/shared.js | 61 +- .../default/pages/blurry-placeholder.js | 11 + .../default/pages/on-loading-complete.js | 32 + .../pages/{static.js => static-img.js} | 3 + .../default/test/index.test.js | 45 + .../default/test/static.test.js | 39 +- .../image-component/typescript/next.config.js | 1 + .../typescript/test/index.test.js | 37 + .../test/detect-content-type.test.js | 25 + .../image-optimizer/test/get-max-age.test.js | 2 +- .../image-optimizer/test/index.test.js | 158 ++- .../not-found-revalidate/test/index.test.js | 12 +- .../polyfill-node-modules/next.config.js | 6 + .../pages/node-browser-polyfills.js | 0 .../polyfill-node-modules/test/index.test.js | 49 + .../pages/error-in-browser-render.js | 2 +- .../production/pages/error-in-ssr-render.js | 2 +- .../integration/production/test/index.test.js | 40 +- .../react-18/prerelease/next.config.js | 14 + .../node_modules/react-dom/index.js | 1 - .../node_modules/react-dom/package.json | 2 +- .../react-18/prerelease/package.json | 1 + .../react-18/prerelease/pages/index.js | 3 + test/integration/react-18/test/index.test.js | 28 +- .../relay-analytics/test/index.test.js | 42 +- test/integration/size-limit/next.config.js | 17 - test/integration/size-limit/pages/about.js | 1 - test/integration/size-limit/pages/index.js | 11 - .../integration/size-limit/test/index.test.js | 90 -- .../typescript/components/router.tsx | 4 + test/isolated/config.unit.test.js | 2 +- test/isolated/require-page.unit.test.js | 4 +- test/unit/find-page-file.unit.test.js | 2 +- test/unit/fixtures/stub-components/hello.js | 5 + test/unit/getDisplayName.unit.test.js | 2 +- test/unit/loadGetInitialProps.unit.test.js | 2 +- test/unit/mitt.unit.test.js | 2 +- test/unit/next-dynamic.test.js | 16 + test/unit/next-server-utils.unit.test.js | 2 +- test/unit/page-route-sorter.unit.test.js | 2 +- test/unit/parse-relative-url.unit.test.js | 2 +- test/unit/router-add-base-path.unit.test.js | 2 +- yarn.lock | 1197 ++++++++++++++++- 364 files changed, 4842 insertions(+), 1414 deletions(-) create mode 100644 .alexignore create mode 100644 .alexrc create mode 100644 errors/template.md create mode 100644 examples/layout-component/components/layout.module.css create mode 100644 examples/layout-component/components/sidebar.js create mode 100644 examples/layout-component/components/sidebar.module.css create mode 100644 examples/layout-component/global.css create mode 100644 examples/layout-component/pages/_app.js delete mode 100644 examples/ssr-caching/pages/blog/[id].js delete mode 100644 examples/ssr-caching/server.js create mode 100644 examples/with-notion/.env.local.example create mode 100644 examples/with-notion/.gitignore create mode 100644 examples/with-notion/README.md create mode 100644 examples/with-notion/components/avatar.js create mode 100644 examples/with-notion/components/container.js create mode 100644 examples/with-notion/components/cover-image.js create mode 100644 examples/with-notion/components/date.js create mode 100644 examples/with-notion/components/footer.js create mode 100644 examples/with-notion/components/header.js create mode 100644 examples/with-notion/components/hero-post.js create mode 100644 examples/with-notion/components/intro.js create mode 100644 examples/with-notion/components/layout.js create mode 100644 examples/with-notion/components/markdown-styles.module.css create mode 100644 examples/with-notion/components/meta.js create mode 100644 examples/with-notion/components/more-stories.js create mode 100644 examples/with-notion/components/post-body.js create mode 100644 examples/with-notion/components/post-header.js create mode 100644 examples/with-notion/components/post-preview.js create mode 100644 examples/with-notion/components/post-title.js create mode 100644 examples/with-notion/components/section-separator.js create mode 100644 examples/with-notion/lib/api.js create mode 100644 examples/with-notion/lib/constants.js create mode 100644 examples/with-notion/next.config.js create mode 100644 examples/with-notion/package.json create mode 100644 examples/with-notion/pages/_app.js create mode 100644 examples/with-notion/pages/_document.js create mode 100644 examples/with-notion/pages/api/posts.js create mode 100644 examples/with-notion/pages/index.js create mode 100644 examples/with-notion/pages/posts/[slug].js create mode 100644 examples/with-notion/postcss.config.js create mode 100644 examples/with-notion/public/cover-images/0f5a110c-7e12-4bc3-8f5e-b207c29eeedb.jpeg create mode 100644 examples/with-notion/public/cover-images/538d7d3a-6efb-48cd-84fd-6da8700a12a8.jpeg create mode 100644 examples/with-notion/public/cover-images/b73b3510-6d65-44ae-8986-3d5c47294780.jpeg create mode 100644 examples/with-notion/public/cover-images/c79aa391-769e-4459-94f6-cdebeac99e67.jpeg create mode 100644 examples/with-notion/public/cover-images/f2cb7687-4340-4fc8-aa5a-91236d5e767f.jpeg create mode 100644 examples/with-notion/public/favicon/android-chrome-192x192.png create mode 100644 examples/with-notion/public/favicon/android-chrome-512x512.png create mode 100644 examples/with-notion/public/favicon/apple-touch-icon.png create mode 100644 examples/with-notion/public/favicon/browserconfig.xml create mode 100644 examples/with-notion/public/favicon/favicon-16x16.png create mode 100644 examples/with-notion/public/favicon/favicon-32x32.png create mode 100644 examples/with-notion/public/favicon/favicon.ico create mode 100644 examples/with-notion/public/favicon/mstile-150x150.png create mode 100644 examples/with-notion/public/favicon/safari-pinned-tab.svg create mode 100644 examples/with-notion/public/favicon/site.webmanifest create mode 100644 examples/with-notion/styles/index.css create mode 100644 examples/with-notion/tailwind.config.js create mode 100644 examples/with-notion/types/author.json create mode 100644 examples/with-notion/types/post.json create mode 100644 packages/next/image-types/global.d.ts rename packages/next/{next-server => }/server/api-utils.ts (99%) rename packages/next/{next-server => }/server/config-shared.ts (97%) rename packages/next/{next-server => }/server/config-utils-worker.ts (91%) rename packages/next/{next-server => }/server/config-utils.ts (94%) rename packages/next/{next-server => }/server/config.ts (98%) rename packages/next/{next-server => }/server/crypto-utils.ts (100%) rename packages/next/{next-server => }/server/denormalize-page-path.ts (100%) rename packages/next/server/{ => dev}/hot-middleware.ts (100%) rename packages/next/server/{ => dev}/hot-reloader.ts (94%) rename packages/next/server/{ => dev}/next-dev-server.ts (83%) rename packages/next/server/{ => dev}/on-demand-entry-handler.ts (96%) rename packages/next/server/{ => dev}/static-paths-worker.ts (80%) rename packages/next/{next-server => }/server/font-utils.ts (94%) rename packages/next/{next-server => }/server/get-page-files.ts (100%) rename packages/next/{next-server => }/server/get-route-from-entrypoint.ts (88%) rename packages/next/{next-server => }/server/image-config.ts (100%) rename packages/next/{next-server => }/server/image-optimizer.ts (79%) rename packages/next/{next-server => }/server/incremental-cache.ts (96%) rename packages/next/{next-server => }/server/lib/recursive-readdir-sync.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/LICENSE (100%) rename packages/next/{next-server => }/server/lib/squoosh/codecs.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/emscripten-utils.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/image_data.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/impl.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/main.ts (97%) rename packages/next/{next-server => }/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/mozjpeg/mozjpeg_node_enc.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/png/squoosh_oxipng.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/png/squoosh_oxipng_bg.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/png/squoosh_png.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/png/squoosh_png_bg.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/resize/squoosh_resize.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/resize/squoosh_resize_bg.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/rotate/rotate.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/text-decoder.ts (100%) rename packages/next/{next-server => }/server/lib/squoosh/webp/webp_node_dec.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/webp/webp_node_dec.wasm (100%) rename packages/next/{next-server => }/server/lib/squoosh/webp/webp_node_enc.js (100%) rename packages/next/{next-server => }/server/lib/squoosh/webp/webp_node_enc.wasm (100%) rename packages/next/{next-server => }/server/load-components.ts (94%) rename packages/next/{next-server => }/server/next-server.ts (94%) rename packages/next/{next-server => }/server/node-polyfill-fetch.js (100%) rename packages/next/{next-server => }/server/normalize-page-path.ts (100%) rename packages/next/{next-server => }/server/optimize-amp.ts (100%) rename packages/next/{next-server => }/server/render.tsx (97%) rename packages/next/{next-server => }/server/require.ts (90%) rename packages/next/{next-server => }/server/router.ts (96%) rename packages/next/{next-server => }/server/send-payload.ts (98%) rename packages/next/{next-server => }/server/serve-static.ts (100%) rename packages/next/{next-server => }/server/utils.ts (88%) rename packages/next/{next-server => shared}/lib/amp-context.ts (100%) rename packages/next/{next-server => shared}/lib/amp.ts (100%) rename packages/next/{next-server => shared}/lib/constants.ts (97%) rename packages/next/{next-server => shared}/lib/document-context.ts (100%) rename packages/next/{next-server => shared}/lib/dynamic.tsx (100%) rename packages/next/{next-server => shared}/lib/head-manager-context.ts (100%) rename packages/next/{next-server => shared}/lib/head.tsx (100%) rename packages/next/{next-server => shared}/lib/i18n/detect-domain-locale.ts (100%) rename packages/next/{next-server => shared}/lib/i18n/detect-locale-cookie.ts (100%) rename packages/next/{next-server => shared}/lib/i18n/normalize-locale-path.ts (100%) rename packages/next/{next-server => shared}/lib/loadable-context.ts (100%) rename packages/next/{next-server => shared}/lib/loadable.d.ts (100%) rename packages/next/{next-server => shared}/lib/loadable.js (98%) rename packages/next/{next-server => shared}/lib/mitt.ts (90%) rename packages/next/{next-server => shared}/lib/post-process.ts (100%) rename packages/next/{next-server => shared}/lib/router-context.ts (100%) rename packages/next/{next-server => shared}/lib/router/router.ts (99%) rename packages/next/{next-server => shared}/lib/router/utils/escape-path-delimiters.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/format-url.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/get-asset-path-from-route.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/get-route-from-asset-path.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/index.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/is-dynamic.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/parse-relative-url.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/path-match.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/prepare-destination.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/querystring.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/resolve-rewrites-noop.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/resolve-rewrites.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/route-matcher.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/route-regex.ts (100%) rename packages/next/{next-server => shared}/lib/router/utils/sorted-routes.ts (100%) rename packages/next/{next-server => shared}/lib/runtime-config.ts (100%) rename packages/next/{next-server => shared}/lib/side-effect.tsx (100%) rename packages/next/{next-server => shared}/lib/to-base-64.ts (100%) rename packages/next/{next-server => shared}/lib/utils.ts (98%) rename check-examples.sh => scripts/check-examples.sh (95%) rename check-pre-compiled.sh => scripts/check-pre-compiled.sh (100%) create mode 100755 scripts/next-with-deps.sh rename publish-release.sh => scripts/publish-release.sh (100%) rename release-stats.sh => scripts/release-stats.sh (100%) rename test-pnp.sh => scripts/test-pnp.sh (100%) create mode 100644 test/integration/custom-error-page-exception/pages/_error.js create mode 100644 test/integration/custom-error-page-exception/pages/index.js create mode 100644 test/integration/custom-error-page-exception/test/index.test.js create mode 100644 test/integration/eslint/max-warnings/.eslintrc create mode 100644 test/integration/eslint/max-warnings/pages/about.js create mode 100644 test/integration/eslint/max-warnings/pages/index.js create mode 100644 test/integration/font-optimization/fixtures/spread-operator-regression/pages/_document.js create mode 100644 test/integration/font-optimization/fixtures/spread-operator-regression/pages/index.js create mode 100644 test/integration/gssp-redirect/pages/gsp-blog-blocking/[post].js create mode 100644 test/integration/i18n-support-same-page-hash-change/next.config.js create mode 100644 test/integration/i18n-support-same-page-hash-change/pages/about.js create mode 100644 test/integration/i18n-support-same-page-hash-change/pages/posts/[...slug].js create mode 100644 test/integration/i18n-support-same-page-hash-change/test/index.test.js create mode 100644 test/integration/image-component/default/pages/on-loading-complete.js rename test/integration/image-component/default/pages/{static.js => static-img.js} (94%) create mode 100644 test/integration/image-optimizer/test/detect-content-type.test.js create mode 100644 test/integration/polyfill-node-modules/next.config.js rename test/integration/{basic => polyfill-node-modules}/pages/node-browser-polyfills.js (100%) create mode 100644 test/integration/polyfill-node-modules/test/index.test.js create mode 100644 test/integration/react-18/prerelease/next.config.js delete mode 100644 test/integration/react-18/prerelease/node_modules/react-dom/index.js delete mode 100644 test/integration/size-limit/next.config.js delete mode 100644 test/integration/size-limit/pages/about.js delete mode 100644 test/integration/size-limit/pages/index.js delete mode 100644 test/integration/size-limit/test/index.test.js create mode 100644 test/unit/fixtures/stub-components/hello.js create mode 100644 test/unit/next-dynamic.test.js diff --git a/.alexignore b/.alexignore new file mode 100644 index 000000000000000..1bf6581c26b1e5c --- /dev/null +++ b/.alexignore @@ -0,0 +1,2 @@ +CODE_OF_CONDUCT.md +examples/ diff --git a/.alexrc b/.alexrc new file mode 100644 index 000000000000000..157d1da8cca5302 --- /dev/null +++ b/.alexrc @@ -0,0 +1,21 @@ +{ + "allow": [ + "attacks", + "color", + "dead", + "execute", + "executed", + "executes", + "execution", + "executions", + "failed", + "failure", + "failures", + "fire", + "fires", + "hook", + "hooks", + "host-hostess", + "invalid" + ] +} diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ed23486c737b417..bef93a8a63b2d82 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,6 +1,6 @@ # Learn how to add code owners here: # https://help.github.com/en/articles/about-code-owners -* @timneutkens @ijjk @lfades @divmain @shuding -/docs/ @timneutkens @ijjk @lfades @divmain @shuding @leerob -/examples/ @timneutkens @ijjk @lfades @divmain @shuding @leerob +* @timneutkens @ijjk @shuding @styfle @huozhi @padmaia +/docs/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades +/examples/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades diff --git a/.github/labeler.json b/.github/labeler.json index f49f210e321170d..03862de2d2dceab 100644 --- a/.github/labeler.json +++ b/.github/labeler.json @@ -9,13 +9,22 @@ "packages/react-refresh-utils/**", "packages/next-codemod/**" ], - "type: chrome": [ + "created-by: Chrome Aurora": [ { "type": "user", "pattern": "spanicker" }, { "type": "user", "pattern": "housseindjirdeh" }, { "type": "user", "pattern": "devknoll" }, { "type": "user", "pattern": "janicklas-ralph" }, { "type": "user", "pattern": "atcastle" }, { "type": "user", "pattern": "Joonpark13" } + ], + "created-by: Next.js team": [ + { "type": "user", "pattern": "ijjk" }, + { "type": "user", "pattern": "padmaia" }, + { "type": "user", "pattern": "huozhi" }, + { "type": "user", "pattern": "shuding" }, + { "type": "user", "pattern": "sokra" }, + { "type": "user", "pattern": "styfle" }, + { "type": "user", "pattern": "timneutkens" } ] } } diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 28f0b8d6fadd000..9e9b995c92dd8dd 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -8,6 +8,7 @@ Choose the right checklist for the change that you're making: - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added +- [ ] Errors have helpful link attached, see `contributing.md` ## Feature @@ -16,6 +17,7 @@ Choose the right checklist for the change that you're making: - [ ] 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 diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml index 02142e51438ae7c..af47945465e88fa 100644 --- a/.github/workflows/build_test_deploy.yml +++ b/.github/workflows/build_test_deploy.yml @@ -55,7 +55,7 @@ jobs: with: path: ./* key: ${{ github.sha }} - - run: ./check-pre-compiled.sh + - run: ./scripts/check-pre-compiled.sh if: ${{needs.build.outputs.docsChange != 'docs only change'}} testUnit: @@ -146,7 +146,7 @@ jobs: path: ./* key: ${{ github.sha }} - - run: bash ./test-pnp.sh + - run: bash ./scripts/test-pnp.sh if: ${{needs.build.outputs.docsChange != 'docs only change'}} testsPass: @@ -251,7 +251,7 @@ jobs: path: ./* key: ${{ github.sha }} - - run: ./publish-release.sh + - run: ./scripts/publish-release.sh prStats: name: Release Stats @@ -263,7 +263,7 @@ jobs: with: path: ./* key: ${{ github.sha }} - - run: ./release-stats.sh + - run: ./scripts/release-stats.sh - uses: ./.github/actions/next-stats-action env: PR_STATS_COMMENT_TOKEN: ${{ secrets.PR_STATS_COMMENT_TOKEN }} diff --git a/azure-pipelines.yml b/azure-pipelines.yml index b6f279038aefb32..38e67f260869a7c 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -111,36 +111,37 @@ stages: - script: | node run-tests.js -g 1/1 --timings --azure --type unit displayName: 'Run tests' - - - job: test_chrome_integration - pool: - vmImage: 'windows-2019' - strategy: - matrix: - nodejs-1: - group: 1/4 - nodejs-2: - group: 2/4 - nodejs-3: - group: 3/4 - nodejs-4: - group: 4/4 - steps: - - checkout: none - - script: | - wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value - displayName: 'List Chrome version' - - task: NodeTool@0 - inputs: - versionSpec: $(node_version) - displayName: 'Install Node.js' - - task: Cache@2 - inputs: - # use deterministic cache key that is specific - # to this test run - key: $(Build.SourceVersion) - path: $(System.DefaultWorkingDirectory) - displayName: Cache Build - - script: | - node run-tests.js -g $(group) --timings --azure - displayName: 'Run tests' + # TODO: investigate re-enabling when stability matches running in + # tests in ubuntu environment + # - job: test_chrome_integration + # pool: + # vmImage: 'windows-2019' + # strategy: + # matrix: + # nodejs-1: + # group: 1/4 + # nodejs-2: + # group: 2/4 + # nodejs-3: + # group: 3/4 + # nodejs-4: + # group: 4/4 + # steps: + # - checkout: none + # - script: | + # wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value + # displayName: 'List Chrome version' + # - task: NodeTool@0 + # inputs: + # versionSpec: $(node_version) + # displayName: 'Install Node.js' + # - task: Cache@2 + # inputs: + # # use deterministic cache key that is specific + # # to this test run + # key: $(Build.SourceVersion) + # path: $(System.DefaultWorkingDirectory) + # displayName: Cache Build + # - script: | + # node run-tests.js -g $(group) --timings --azure + # displayName: 'Run tests' diff --git a/contributing.md b/contributing.md index fa17d4ae5e2a747..10638d8fed19d51 100644 --- a/contributing.md +++ b/contributing.md @@ -14,6 +14,20 @@ Read about our [Commitment to Open Source](https://vercel.com/oss). To contribute to [our examples](examples), take a look at the [“Adding examples” section](#adding-examples). +## Adding warning/error descriptions + +In Next.js we have a system to add helpful links to warnings and errors. + +This allows for the logged message to be short while giving a broader description and instructions on how to solve the warning/error. + +In general all warnings and errors added should have these links attached. + +Below are the steps to add a new link: + +- Create a new markdown file under the `errors` directory based on `errors/template.md`: `cp errors/template.md errors/.md` +- Add the newly added file to `errors/manifest.json` +- Add the following url to your warning/error: `https://nextjs.org/docs/messages/`. For example to link to `errors/api-routes-static-export.md` you use the url: `https://nextjs.org/docs/messages/api-routes-static-export` + ## To run tests Make sure you have `chromedriver` installed for your Chrome version. You can install it with @@ -46,7 +60,7 @@ Running a specific test suite inside of the `test/integration` directory: yarn testonly --testPathPattern "production" ``` -Running just one test in the `production` test suite: +Running one test in the `production` test suite: ```sh yarn testonly --testPathPattern "production" -t "should allow etag header support" @@ -155,3 +169,7 @@ yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ```` + +## Publishing + +Repository maintainers can use `yarn publish-canary` to publish a new version of all packages to npm. diff --git a/docs/advanced-features/codemods.md b/docs/advanced-features/codemods.md index 27f3bc59fc546b7..f897c89f206ea27 100644 --- a/docs/advanced-features/codemods.md +++ b/docs/advanced-features/codemods.md @@ -169,7 +169,7 @@ export default withRouter( ) ``` -This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter). +This is one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter). #### Usage diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md index 4f0cdead04d92e4..71dd20af3257743 100644 --- a/docs/advanced-features/custom-app.md +++ b/docs/advanced-features/custom-app.md @@ -42,7 +42,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout ### Caveats -- If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before. +- If your app is running and you added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before. - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation). - When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value. - `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering). diff --git a/docs/advanced-features/debugging.md b/docs/advanced-features/debugging.md index 3c3b30e73550404..3e195e012ed220b 100644 --- a/docs/advanced-features/debugging.md +++ b/docs/advanced-features/debugging.md @@ -69,7 +69,7 @@ Now hit F5 or select **Debug: Start Debugging** from the Command Pale Now you can use the [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement to pause your backend or frontend code anytime you want to observe and debug your code more precisely. -If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will pop up. +If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will appear. To learn more on how to use a JavaScript debugger, take a look at the following documentation: diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index 2f9c8b37e7cce63..9bd60726971b592 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -45,7 +45,7 @@ export default function Page() { You can think of dynamic imports as another way to split your code into manageable chunks. -React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works. +React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works like any other React Component. Check out the sections below for more details on how it works. ## Basic usage diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md index e76fe99b158870e..c21b2b9e73d6707 100644 --- a/docs/advanced-features/i18n-routing.md +++ b/docs/advanced-features/i18n-routing.md @@ -52,6 +52,9 @@ module.exports = { { domain: 'example.fr', defaultLocale: 'fr', + // an optional http field can also be used to test + // locale domains locally with http instead of https + http: true, }, ], }, diff --git a/docs/advanced-features/multi-zones.md b/docs/advanced-features/multi-zones.md index 1fce98d049e5816..ec29f22f33b752b 100644 --- a/docs/advanced-features/multi-zones.md +++ b/docs/advanced-features/multi-zones.md @@ -18,7 +18,7 @@ With multi zones support, you can merge both these apps into a single one allowi ## How to define a zone -There are no special zones related APIs. You only need to do following: +There are no zone related APIs. You only need to do following: - Make sure to keep only the pages you need in your app, meaning that an app can't have pages from another app, if app `A` has `/blog` then app `B` shouldn't have it too. - Make sure to configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files. diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index db5be67f1ebaa1c..1fe223855cb7069 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -11,16 +11,18 @@ To improve the security of your application, you can use [`headers`](/docs/api-r // You can choose which headers to add to the list // after learning more below. -const securityHeaders = []; - -async headers() { - return [ - { - // Apply these headers to all routes in your application. - source: '/(.*)', - headers: securityHeaders - } - ] +const securityHeaders = [] + +module.exports = { + async headers() { + return [ + { + // Apply these headers to all routes in your application. + source: '/(.*)', + headers: securityHeaders, + }, + ] + }, } ``` diff --git a/docs/advanced-features/static-html-export.md b/docs/advanced-features/static-html-export.md index 4451680a3544f17..c217b55d952ac4c 100644 --- a/docs/advanced-features/static-html-export.md +++ b/docs/advanced-features/static-html-export.md @@ -17,7 +17,7 @@ The exported app supports almost every feature of Next.js, including dynamic rou `next export` works by prerendering all pages to HTML. For [dynamic routes](/docs/routing/dynamic-routes.md), your page can export a [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) function to let the exporter know which HTML pages to generate for that route. -> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side) just fine). +> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)). > > If you're looking to make a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically for you! Read up on [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) for details. > diff --git a/docs/api-reference/cli.md b/docs/api-reference/cli.md index 2f88d1c19d8a79e..b79edb5f0bbcefa 100644 --- a/docs/api-reference/cli.md +++ b/docs/api-reference/cli.md @@ -46,7 +46,7 @@ NODE_OPTIONS='--inspect' next - **Size** – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies. - **First Load JS** – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric. -The first load is colored green, yellow, or red. Aim for green for performant applications. +The first load is indicated by green, yellow, or red. Aim for green for performant applications. You can enable production profiling for React with the `--profile` flag in `next build`. This requires [Next.js 9.5](https://nextjs.org/blog/next-9-5): diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md index d82dfdfc6d757f5..1192865d09c0012 100644 --- a/docs/api-reference/create-next-app.md +++ b/docs/api-reference/create-next-app.md @@ -4,7 +4,7 @@ description: Create Next.js apps in one command with create-next-app. # Create Next App -The easiest way to get started with Next.js is by using `create-next-app`. This simple CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command: +The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command: ```bash npx create-next-app diff --git a/docs/api-reference/next.config.js/introduction.md b/docs/api-reference/next.config.js/introduction.md index 097da42d032d182..32c72c02321c323 100644 --- a/docs/api-reference/next.config.js/introduction.md +++ b/docs/api-reference/next.config.js/introduction.md @@ -26,7 +26,7 @@ module.exports = (phase, { defaultConfig }) => { } ``` -`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`: +`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`: ```js const { PHASE_DEVELOPMENT_SERVER } = require('next/constants') @@ -44,7 +44,7 @@ module.exports = (phase, { defaultConfig }) => { } ``` -The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config-shared.ts#L68). +The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/server/config-shared.ts#L68). However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do. diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 552902f76082a0d..4dd7b2e878b10ca 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -102,7 +102,7 @@ When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports. When `fill`, the image will stretch both width and height to the dimensions of -the parent element, usually paired with the [`objectFit`](#objectFit) property. +the parent element, provided the parent element is relative. This is usually paired with the [`objectFit`](#objectFit) property. Try it out: @@ -195,6 +195,10 @@ The image position when using `layout="fill"`. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) +### onLoadingComplete + +A callback function that is invoked once the image is completely loaded and the placeholder has been removed. + ### loading > **Attention**: This property is only meant for advanced usage. Switching an @@ -242,6 +246,7 @@ Other properties on the `` component will be passed to the underlying - `srcSet`. Use [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes) instead. +- `ref`. Use [`onLoadingComplete`](#onloadingcomplete) instead. - `decoding`. It is always `"async"`. ## Related diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md index 9abe8ec06c0d73e..a5272331968a4d6 100644 --- a/docs/api-reference/next/link.md +++ b/docs/api-reference/next/link.md @@ -65,7 +65,7 @@ export default Home ## If the route has dynamic segments -There is nothing special to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link. +There is nothing to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link. For example, the dynamic route `pages/blog/[slug].js` will match the following link: diff --git a/docs/api-reference/next/router.md b/docs/api-reference/next/router.md index 84e9fafcb746568..60aa34f7f70920f 100644 --- a/docs/api-reference/next/router.md +++ b/docs/api-reference/next/router.md @@ -49,6 +49,7 @@ The following is the definition of the `router` object returned by both [`useRou - `locale`: `String` - The active locale (if enabled). - `locales`: `String[]` - All supported locales (if enabled). - `defaultLocale`: `String` - The current default locale (if enabled). +- `domainLocales`: `Array<{domain, defaultLocale, locales}>` - Any configured domain locales. - `isReady`: `boolean` - Whether the router fields are updated client-side and ready for use. Should only be used inside of `useEffect` methods and not for conditionally rendering on the server. - `isPreview`: `boolean` - Whether the application is currently in [preview mode](/docs/advanced-features/preview-mode.md). @@ -341,7 +342,7 @@ You can listen to different events happening inside the Next.js Router. Here's a - `routeChangeComplete(url, { shallow })` - Fires when a route changed completely - `routeChangeError(err, url, { shallow })` - Fires when there's an error when changing routes, or a route load is cancelled - `err.cancelled` - Indicates if the navigation was cancelled -- `beforeHistoryChange(url, { shallow })` - Fires just before changing the browser's history +- `beforeHistoryChange(url, { shallow })` - Fires before changing the browser's history - `hashChangeStart(url, { shallow })` - Fires when the hash will change but not the page - `hashChangeComplete(url, { shallow })` - Fires when the hash has changed but not the page diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index 937181cbedbcf25..93f5ae012ae1ba4 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -134,7 +134,7 @@ The `context` parameter is an object containing the following keys: > > Fetching from an external API is fine! -### Simple Example +### Example Here’s an example which uses `getStaticProps` to fetch a list of blog posts from a CMS (content management system). This example is also in the [Pages documentation](/docs/basic-features/pages.md). @@ -299,7 +299,7 @@ When a request is made to a page that was pre-rendered at build time, it will in - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous. - After the 10-second window, the next request will still show the cached (stale) page - Next.js triggers a regeneration of the page in the background. -- Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered. +- Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page will stay unaltered. When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache. @@ -513,7 +513,7 @@ If `fallback` is `true`, then the behavior of `getStaticProps` changes: - The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path (see [“Fallback pages”](#fallback-pages) below for details). - In the background, Next.js will statically generate the requested path HTML and JSON. This includes running `getStaticProps`. - When that’s done, the browser receives the JSON for the generated path. This will be used to automatically render the page with the required props. From the user’s perspective, the page will be swapped from the fallback page to the full page. -- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time. +- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, like other pages pre-rendered at build time. > `fallback: true` is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). @@ -591,7 +591,7 @@ If `fallback` is `'blocking'`, new paths not returned by `getStaticPaths` will w - The paths returned from `getStaticPaths` will be rendered to HTML at build time by `getStaticProps`. - The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will SSR on the first request and return the generated HTML. - When that’s done, the browser receives the HTML for the generated path. From the user’s perspective, it will transition from "the browser is requesting the page" to "the full page is loaded". There is no flash of loading/fallback state. -- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time. +- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, like other pages pre-rendered at build time. `fallback: 'blocking'` will not _update_ generated pages by default. To update generated pages, use [Incremental Static Regeneration](#incremental-static-regeneration) in conjunction with `fallback: 'blocking'`. @@ -727,7 +727,7 @@ The `context` parameter is an object containing the following keys: > > Fetching from an external API is fine! -### Simple example +### Example Here’s an example which uses `getServerSideProps` to fetch data at request time and pre-renders it. This example is also in the [Pages documentation](/docs/basic-features/pages.md). @@ -825,8 +825,10 @@ The team behind Next.js has created a React hook for data fetching called [**SWR ```jsx import useSWR from 'swr' +const fetcher = (url) => fetch(url).then((res) => res.json()) + function Profile() { - const { data, error } = useSWR('/api/user', fetch) + const { data, error } = useSWR('/api/user', fetcher) if (error) return
failed to load
if (!data) return
loading...
diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md index 42556ca74b31894..bb8fe78c13b0cb2 100644 --- a/docs/basic-features/environment-variables.md +++ b/docs/basic-features/environment-variables.md @@ -16,7 +16,7 @@ description: Learn to add and access environment variables in your Next.js appli Next.js comes with built-in support for environment variables, which allows you to do the following: - [Use `.env.local` to load environment variables](#loading-environment-variables) -- [Expose environment variables to the browser](#exposing-environment-variables-to-the-browser) +- [Expose environment variables to the browser by prefixing with `NEXT_PUBLIC_`](#exposing-environment-variables-to-the-browser) ## Loading Environment Variables diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md index 93ff1a28fd53725..7efbfc1382f1ce5 100644 --- a/docs/basic-features/pages.md +++ b/docs/basic-features/pages.md @@ -56,7 +56,7 @@ You can also use **Client-side Rendering** along with Static Generation or Serve
  • Prismic Example (Demo)
  • Contentful Example (Demo)
  • Strapi Example (Demo)
    • -
  • Prepr Example (Demo)
    • +
  • Prepr Example (Demo)
  • Agility CMS Example (Demo)
  • Cosmic Example (Demo)
  • ButterCMS Example (Demo)
    • @@ -87,7 +87,7 @@ Note that this page does not need to fetch any external data to be pre-rendered. ### Static Generation with data -Some pages require fetching external data for pre-rendering. There are two scenarios, and one or both might apply. In each case, you can use a special function Next.js provides: +Some pages require fetching external data for pre-rendering. There are two scenarios, and one or both might apply. In each case, you can use these functions that Next.js provides: 1. Your page **content** depends on external data: Use `getStaticProps`. 2. Your page **paths** depend on external data: Use `getStaticPaths` (usually in addition to `getStaticProps`). diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md index 2e8e2b658a73c8e..f3e4d3cb57426a9 100644 --- a/docs/basic-features/script.md +++ b/docs/basic-features/script.md @@ -35,7 +35,7 @@ Previously, you needed to define `script` tags inside the `Head` of your Next.js // pages/index.js import Head from 'next/head' -function Home() { +export default function Home() { return ( <> @@ -54,7 +54,7 @@ With `next/script`, you no longer need to wrap scripts in `next/head`. Further, // pages/index.js import Script from 'next/script' -function Home() { +export default function Home() { return ( <>