diff --git a/docs/advanced-features/customizing-postcss-config.md b/docs/advanced-features/customizing-postcss-config.md index 71e3db3b4adcc..b89b4817f11c2 100644 --- a/docs/advanced-features/customizing-postcss-config.md +++ b/docs/advanced-features/customizing-postcss-config.md @@ -26,13 +26,48 @@ Out of the box, with no configuration, Next.js compiles CSS with the following t - [Gap Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4) -By default, [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support. +By default, [CSS Grid](https://www.w3.org/TR/css-grid-1/) and [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support. + +To compile [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for IE11, you can place the following comment at the top of your CSS file: + +```css +/* autoprefixer grid: autoplace */ +``` + +You can also enable IE11 support for [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) +in your entire project by configuring autoprefixer with the configuration shown below (collapsed). +See ["Customizing Plugins"](#customizing-plugins) below for more information. + +
+Click to view the configuration to enable CSS Grid Layout + +```json +{ + "plugins": [ + "postcss-flexbugs-fixes", + [ + "postcss-preset-env", + { + "autoprefixer": { + "flexbox": "no-2009", + "grid": "autoplace" + }, + "stage": 3, + "features": { + "custom-properties": false + } + } + ] + ] +} +``` + +
+
CSS variables are not compiled because it is [not possible to safely do so](https://github.com/MadLittleMods/postcss-css-variables#caveats). If you must use variables, consider using something like [Sass variables](https://sass-lang.com/documentation/variables) which are compiled away by [Sass](https://sass-lang.com/). -> **Note**: To support [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), you need to enable `grid: "autoplace"` for Autoprefixer. See ["Customizing Plugins"](#customizing-plugins) below. - ## Customizing Target Browsers Next.js allows you to configure the target browsers (for [Autoprefixer](https://github.com/postcss/autoprefixer) and compiled css features) through [Browserslist](https://github.com/browserslist/browserslist). diff --git a/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md b/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md index 0f04a3de29d39..fe8b1ce0d1a66 100644 --- a/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md +++ b/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md @@ -4,6 +4,13 @@ description: A custom asset prefix allows you serve static assets from a CDN. Le # CDN Support with Asset Prefix +> **Attention**: [Deploying to Vercel](docs/deployment.md) automatically configures a global CDN for your Next.js project. +> You do not need to manually setup an Asset Prefix. + +> **Note**: Next.js 9.5+ added support for a customizable [Base Path](docs/api-reference/next.config.js/basepath.md), which is better +> suited for hosting your application on a sub-path like `/docs`. +> We do not suggest you use a custom Asset Prefix for this use case. + To set up a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network), you can set up an asset prefix and configure your CDN's origin to resolve to the domain that Next.js is hosted on. Open `next.config.js` and add the `assetPrefix` config: @@ -17,7 +24,13 @@ module.exports = { } ``` -Next.js will automatically use your prefix in the scripts it loads, but this has no effect whatsoever on the [public](/docs/basic-features/static-file-serving.md) folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself. One way of introducing a prefix that works inside your components and varies by environment is documented [in this example](https://github.com/vercel/next.js/tree/canary/examples/with-universal-configuration-build-time). +Next.js will automatically use your asset prefix for the JavaScript and CSS files it loads from the `/_next/` path (`.next/static/` folder). + +Asset prefix support does not influence the following paths: + +- Files in the [public](/docs/basic-features/static-file-serving.md) folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself +- `/_next/data/` requests for `getServerSideProps` pages. These requests will always be made against the main domain since they're not static. +- `/_next/data/` requests for `getStaticProps` pages. These requests will always be made against the main domain to support [Incremental Static Generation](/docs/basic-features/data-fetching.md#incremental-static-regeneration), even if you're not using it (for consistency). ## Related diff --git a/docs/api-reference/next.config.js/runtime-configuration.md b/docs/api-reference/next.config.js/runtime-configuration.md index b52e3e8898560..0c7a1501715cb 100644 --- a/docs/api-reference/next.config.js/runtime-configuration.md +++ b/docs/api-reference/next.config.js/runtime-configuration.md @@ -4,7 +4,7 @@ description: Add client and server runtime configuration to your Next.js app. # Runtime Configuration -> Generally you'll want to use [build-time environment variables](/docs/api-reference/next.config.js/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md). +> Generally you'll want to use [build-time environment variables](/docs/basic-features/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md). To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs: diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md index 76075d70a9747..ae05f12481826 100644 --- a/docs/basic-features/built-in-css-support.md +++ b/docs/basic-features/built-in-css-support.md @@ -52,7 +52,47 @@ In production, all CSS files will be automatically concatenated into a single mi ### Import styles from `node_modules` -If you’d like to import CSS files from `node_modules`, you must do so inside `pages/_app.js`. +Importing a CSS file from `node_modules` is permitted in anywhere your application. + +For global stylesheets, like `bootstrap` or `nprogress`, you should import the file inside `pages/_app.js`. +For example: + +```jsx +// pages/_app.js +import 'bootstrap/dist/css/bootstrap.css' + +export default function MyApp({ Component, pageProps }) { + return +} +``` + +For importing CSS required by a third party component, you can do so in your component. For example: + +```tsx +// components/ExampleDialog.js +import { useState } from 'react' +import { Dialog } from '@reach/dialog' +import '@reach/dialog/styles.css' + +function ExampleDialog(props) { + const [showDialog, setShowDialog] = useState(false) + const open = () => setShowDialog(true) + const close = () => setShowDialog(false) + + return ( +
+ + + +

Hello there. I am a dialog

+ +
+ ) +} +``` ## Adding Component-Level CSS diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index 89deffe5e005e..b16d843eb5491 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -52,7 +52,7 @@ export async function getStaticProps(context) { The `context` parameter is an object containing the following keys: - `params` contains the route parameters for pages using dynamic routes. For example, if the page name is `[id].js` , then `params` will look like `{ id: ... }`. To learn more, take a look at the [Dynamic Routing documentation](/docs/routing/dynamic-routes.md). You should use this together with `getStaticPaths`, which we’ll explain later. -- `preview` is `true` if the page is in the preview mode and `false` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md). +- `preview` is `true` if the page is in the preview mode and `undefined` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md). - `previewData` contains the preview data set by `setPreviewData`. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md). `getStaticProps` should return an object with: diff --git a/errors/href-interpolation-failed.md b/errors/href-interpolation-failed.md new file mode 100644 index 0000000000000..a3526207cba52 --- /dev/null +++ b/errors/href-interpolation-failed.md @@ -0,0 +1,54 @@ +# `href` Interpolation Failed + +#### Why This Error Occurred + +Somewhere you are utilizing the `next/link` component, `Router#push`, or `Router#replace` with `href` interpolation to build dynamic routes but did not provide all of the needed dynamic route params to properly interpolate the `href`. + +Note: this error will only show when the `next/link` component is clicked not when only rendered. + +**Invalid `href` interpolation** + +```jsx +import Link from 'next/link' + +export default function BlogLink() { + return ( + + Invalid link + + ) +} +``` + +**Valid `href` interpolation** + +```jsx +import Link from 'next/link' + +export default function BlogLink() { + return ( + + Valid link + + ) +} +``` + +#### Possible Ways to Fix It + +Look for any usage of the `next/link` component, `Router#push`, or `Router#replace` and make sure that the provided `href` has all needed dynamic params in the query. + +### Useful Links + +- [Routing section in Documentation](https://nextjs.org/docs/routing/introduction) +- [Dynamic routing section in Documentation](https://nextjs.org/docs/routing/dynamic-routes) diff --git a/errors/next-head-count-missing.md b/errors/next-head-count-missing.md index 40c040f319461..6091c41d7a644 100644 --- a/errors/next-head-count-missing.md +++ b/errors/next-head-count-missing.md @@ -6,6 +6,8 @@ You have a custom `pages/_document.js` that doesn't have the components required #### Possible Ways to Fix It -Ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document). +Upgrade Next.js to 9.5.4 or later, which does not require `next-head-count`. + +If you can't upgrade right now, ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document). In this case you are most likely not rendering the `` component imported from `next/document`. diff --git a/examples/with-mongodb-mongoose/models/Pet.js b/examples/with-mongodb-mongoose/models/Pet.js index 74bdfe63733fc..ca87746ffdee7 100644 --- a/examples/with-mongodb-mongoose/models/Pet.js +++ b/examples/with-mongodb-mongoose/models/Pet.js @@ -34,7 +34,7 @@ const PetSchema = new mongoose.Schema({ type: Boolean, }, diet: { - /* List of dietary needs, if applicale */ + /* List of dietary needs, if applicable */ type: Array, }, diff --git a/examples/with-slate/components/NextEditor.js b/examples/with-slate/components/NextEditor.js deleted file mode 100644 index 8d51aee357fca..0000000000000 --- a/examples/with-slate/components/NextEditor.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useState } from 'react' -import Plain from 'slate-plain-serializer' -import { Editor } from 'slate-react' -import useCustomKeygen from '../lib/useCustomKeygen' - -const NextEditor = ({ slateKey, defaultValue, ...props }) => { - useCustomKeygen(slateKey) - const [state, setState] = useState(() => Plain.deserialize(defaultValue)) - - return ( - setState(value)} - /> - ) -} - -export default NextEditor diff --git a/examples/with-slate/lib/useCustomKeygen.js b/examples/with-slate/lib/useCustomKeygen.js deleted file mode 100644 index e706ddbc01ee9..0000000000000 --- a/examples/with-slate/lib/useCustomKeygen.js +++ /dev/null @@ -1,14 +0,0 @@ -import { useRef } from 'react' -import { KeyUtils } from 'slate' - -const useCustomKeygen = (uniqueKey) => { - const ref = useRef(null) - if (!ref.current || ref.current !== uniqueKey) { - let n = 0 - const keygen = () => `${uniqueKey}${n++}` - KeyUtils.setGenerator(keygen) - ref.current = uniqueKey - } -} - -export default useCustomKeygen diff --git a/examples/with-slate/package.json b/examples/with-slate/package.json index ca09f34d27cff..a9493334f9dfd 100644 --- a/examples/with-slate/package.json +++ b/examples/with-slate/package.json @@ -7,13 +7,12 @@ "start": "next start" }, "dependencies": { - "immutable": "^3.8.2", "next": "latest", "react": "^16.7.0", "react-dom": "^16.7.0", - "slate": "^0.37.0", - "slate-plain-serializer": "^0.5.27", - "slate-react": "^0.15.0" + "slate": "^0.58.4", + "slate-history": "0.58.4", + "slate-react": "^0.58.4" }, "license": "MIT" } diff --git a/examples/with-slate/pages/index.js b/examples/with-slate/pages/index.js index ceb35a9538aa3..edebb65af8818 100644 --- a/examples/with-slate/pages/index.js +++ b/examples/with-slate/pages/index.js @@ -1,19 +1,24 @@ -import Link from 'next/link' -import NextEditor from '../components/NextEditor' +import React, { useState, useMemo } from 'react' +import { createEditor } from 'slate' +import { Slate, Editable, withReact } from 'slate-react' +import { withHistory } from 'slate-history' -const IndexPage = (props) => { +const IndexPage = () => { + const [value, setValue] = useState(initialValue) + const editor = useMemo(() => withHistory(withReact(createEditor())), []) return ( - <> - - Go to multiple - -
- - + setValue(value)}> + + ) } +const initialValue = [ + { + children: [ + { text: 'This is editable plain text, just like a