+
+
+The Next.js Compiler, written in Rust using [SWC](http://swc.rs/), allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files and Terser for minifying output bundles.
+
+Compilation using the Next.js Compiler is 17x faster than Babel and enabled by default since Next.js version 12. If you have an existing Babel configuration or are using [unsupported features](#unsupported-features), your application will opt-out of the Next.js Compiler and continue using Babel.
+
+## Why SWC?
+
+[SWC](http://swc.rs/) is an extensible Rust-based platform for the next generation of fast developer tools.
+
+SWC can be used for compilation, minification, bundling, and more – and is designed to be extended. It's something you can call to perform code transformations (either built-in or custom). Running those transformations happens through higher-level tools like Next.js.
+
+We chose to build on SWC for a few reasons:
+
+- **Extensibility:** SWC can be used as a Crate inside Next.js, without having to fork the library or workaround design constraints.
+- **Performance:** We were able to achieve ~3x faster Fast Refresh and ~5x faster builds in Next.js by switching to SWC, with more room for optimization still in progress.
+- **WebAssembly:** Rust's support for WASM is essential for supporting all possible platforms and taking Next.js development everywhere.
+- **Community:** The Rust community and ecosystem are amazing and still growing.
+
+## Supported Features
+
+### Styled Components
+
+We're working to port `babel-plugin-styled-components` to the Next.js Compiler.
+
+First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file:
+
+```js
+// next.config.js
+
+module.exports = {
+ compiler: {
+ // ssr and displayName are configured by default
+ styledComponents: true,
+ },
+}
+```
+
+Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js.
+
+### Jest
+
+Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including:
+
+- Auto mocking of `.css`, `.module.css` (and their `.scss` variants), and image imports
+- Automatically sets up `transform` using SWC
+- Loading `.env` (and all variants) into `process.env`
+- Ignores `node_modules` from test resolving and transforms
+- Ignoring `.next` from test resolving
+- Loads `next.config.js` for flags that enable experimental SWC transforms
+
+First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jest.config.js` file:
+
+```js
+// jest.config.js
+const nextJest = require('next/jest')
+
+// Providing the path to your Next.js app which will enable loading next.config.js and .env files
+const createJestConfig = nextJest({ dir })
+
+// Any custom config you want to pass to Jest
+const customJestConfig = {
+ setupFilesAfterEnv: ['Version History
+ +| Version | Changes | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| `v12.1.0` | Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. | +| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). | + +Home Page
+
+ )
+}
+
+export default Home
+```
+
+### Useful Links
+
+- [Script component docs](https://nextjs.org/docs/basic-features/script/)
diff --git a/errors/no-server-import-in-page.md b/errors/no-server-import-in-page.md
new file mode 100644
index 0000000000000..c8fc45069a28f
--- /dev/null
+++ b/errors/no-server-import-in-page.md
@@ -0,0 +1,23 @@
+# No Server Import In Page
+
+### Why This Error Occurred
+
+`next/server` was imported outside of `pages/**/_middleware.{js,ts}`.
+
+### Possible Ways to Fix It
+
+Only import and use `next/server` in a file located within the pages directory: `pages/**/_middleware.{js,ts}`.
+
+```ts
+// pages/_middleware.ts
+
+import type { NextFetchEvent, NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest, ev: NextFetchEvent) {
+ return new Response('Hello, world!')
+}
+```
+
+### Useful Links
+
+- [Middleware](https://nextjs.org/docs/middleware)
diff --git a/errors/no-stylesheets-in-head-component.md b/errors/no-stylesheets-in-head-component.md
new file mode 100644
index 0000000000000..3e3901a682ddd
--- /dev/null
+++ b/errors/no-stylesheets-in-head-component.md
@@ -0,0 +1,42 @@
+# No Stylesheets In Head Component
+
+### Why This Error Occurred
+
+A `` tag was added using the `next/head` component.
+
+We don't recommend this pattern because it will potentially break when used with Suspense and/or streaming. In these contexts, `next/head` tags aren't:
+
+- guaranteed to be included in the initial SSR response, so loading could be delayed until client-side rendering, regressing performance.
+
+- loaded in any particular order. The order that the app's Suspense boundaries resolve will determine the loading order of your stylesheets.
+
+### Possible Ways to Fix It
+
+#### Document
+
+Add the stylesheet in a custom `Document` component.
+
+```jsx
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
@@ -25,8 +25,6 @@ const Home = () => {
export default Home
```
-Note: This is still an experimental feature and needs to be enabled via the `experimental.scriptLoader` flag in `next.config.js`.
-
### Useful Links
- [Efficiently load third-party JavaScript](https://web.dev/efficiently-load-third-party-javascript/)
diff --git a/errors/opening-an-issue.md b/errors/opening-an-issue.md
new file mode 100644
index 0000000000000..179f895135e4d
--- /dev/null
+++ b/errors/opening-an-issue.md
@@ -0,0 +1,28 @@
+# Opening a new Issue
+
+#### Why This Message Occurred
+
+When `next info` was run, Next.js detected that it's was not on the latest canary release.
+
+`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta.
+
+Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.
+
+Run the following in the codebase:
+
+```sh
+npm install next@canary
+```
+
+or
+
+```sh
+yarn add next@canary
+```
+
+And go through the prepared reproduction steps once again, and check if the issue still exists.
+
+### Useful Links
+
+- [Video: How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?v=cuoNzXFLitc)
+- [Contributing to Next.js](https://github.com/vercel/next.js/blob/canary/contributing.md)
diff --git a/errors/page-data-collection-timeout.md b/errors/page-data-collection-timeout.md
new file mode 100644
index 0000000000000..49d2d80fa9f68
--- /dev/null
+++ b/errors/page-data-collection-timeout.md
@@ -0,0 +1,18 @@
+# Collecting page data timed out after multiple attempts
+
+#### Why This Error Occurred
+
+Next.js tries to restart the worker pool of the page data collection when no progress happens for a while, to avoid hanging builds.
+
+When restarted it will retry all uncompleted jobs, but if a job was unsuccessfully attempted multiple times, this will lead to an error.
+
+#### Possible Ways to Fix It
+
+- Make sure that there is no infinite loop during execution.
+- Make sure all Promises in `getStaticPaths` `resolve` or `reject` correctly.
+- Avoid very long timeouts for network requests.
+- Increase the timeout by changing the `config.staticPageGenerationTimeout` configuration option (default `60` in seconds).
+
+### Useful Links
+
+- [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md)
diff --git a/errors/page-without-valid-component.md b/errors/page-without-valid-component.md
index 09d94fee00c35..965bce9fdb6d6 100644
--- a/errors/page-without-valid-component.md
+++ b/errors/page-without-valid-component.md
@@ -14,3 +14,5 @@ For each, you'll want to check if the file is meant to be a page.
If the file is not meant to be a page, and instead, is a shared component or file, move the file to a different folder like `components` or `lib`.
If the file is meant to be a page, double check you have an `export default` with the React Component instead of an `export`. If you're already using `export default`, make sure the returned value is a valid React Component.
+
+If you need to support a different file extension for a page component (such as `.mdx`) or would like to include non-page files in the `pages` directory, configure [Custom Page Extensions](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions) in the `next.config.js`.
diff --git a/errors/placeholder-blur-data-url.md b/errors/placeholder-blur-data-url.md
new file mode 100644
index 0000000000000..9c9a76819dd78
--- /dev/null
+++ b/errors/placeholder-blur-data-url.md
@@ -0,0 +1,15 @@
+# `placeholder=blur` without `blurDataURL`
+
+#### Why This Error Occurred
+
+You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property.
+
+The `blurDataURL` might be missing because you're using a string for `src` instead of a static import.
+
+Or `blurDataURL` might be missing because the static import is an unsupported image format. Only jpg, png, webp, and avif are supported at this time.
+
+#### Possible Ways to Fix It
+
+- Add a [`blurDataURL`](https://nextjs.org/docs/api-reference/next/image#blurdataurl) property, the contents should be a small Data URL to represent the image
+- Change the [`src`](https://nextjs.org/docs/api-reference/next/image#src) property to a static import with one of the supported file types: jpg, png, or webp
+- Remove the [`placeholder`](https://nextjs.org/docs/api-reference/next/image#placeholder) property, effectively no blur effect
diff --git a/errors/postcss-ignored-plugin.md b/errors/postcss-ignored-plugin.md
index 658ad57f28575..e8c73f1c69965 100644
--- a/errors/postcss-ignored-plugin.md
+++ b/errors/postcss-ignored-plugin.md
@@ -17,4 +17,4 @@ Remove the plugin specified in the error message from your custom PostCSS config
#### How do I configure CSS Modules?
CSS Modules are supported in [Next.js' built-in CSS support](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
-You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about how to use them [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
+You can [read more about how to use CSS Modules here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
diff --git a/errors/postcss-shape.md b/errors/postcss-shape.md
index 889fe55bcbc68..f121c889d04b1 100644
--- a/errors/postcss-shape.md
+++ b/errors/postcss-shape.md
@@ -39,7 +39,7 @@ module.exports = {
}
```
-You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about configuring PostCSS in Next.js [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
+You can [read more about configuring PostCSS in Next.js here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
#### Common Errors
diff --git a/errors/prefetch-true-deprecated.md b/errors/prefetch-true-deprecated.md
index dbc5a2ed346f4..77733fea94726 100644
--- a/errors/prefetch-true-deprecated.md
+++ b/errors/prefetch-true-deprecated.md
@@ -18,4 +18,4 @@ These requests have low-priority and yield to fetch() or XHR requests. Next.js w
The prefetch attribute is no longer needed, when set to true, example: `prefetch={true}`, remove the property.
-Prefetching can be disabled with `prefetch={false}`.
+Prefetching can be turned off with `prefetch={false}`.
diff --git a/errors/prerender-error.md b/errors/prerender-error.md
index 87e301c459db6..474926c9631ba 100644
--- a/errors/prerender-error.md
+++ b/errors/prerender-error.md
@@ -7,7 +7,8 @@ While prerendering a page an error occurred. This can occur for many reasons fro
#### Possible Ways to Fix It
- Make sure to move any non-pages out of the `pages` folder
-- Check for any code that assumes a prop is available even when it might not be. e.g., have default data for all dynamic pages' props.
+- Check for any code that assumes a prop is available, even when it might not be
+- Set default values for all dynamic pages' props (avoid `undefined`, use `null` instead so it can be serialized)
- Check for any out of date modules that you might be relying on
-- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required)
-- Make sure you are not trying to export (`next export`) pages that have server-side rendering enabled [(getServerSideProps)](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)
+- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false)
+- Make sure you are not trying to export (`next export`) pages that have server-side rendering enabled [(getServerSideProps)](/docs/basic-features/data-fetching/get-server-side-props.md)
diff --git a/errors/promise-in-next-config.md b/errors/promise-in-next-config.md
index f39ce7786fc78..84ac204fa85c9 100644
--- a/errors/promise-in-next-config.md
+++ b/errors/promise-in-next-config.md
@@ -14,6 +14,8 @@ module.exports = {
#### Possible Ways to Fix It
-Check your `next.config.js` for `async` or `return Promise`
+In Next.js versions above `12.0.10`, `module.exports = async () =>` is supported.
+
+For older versions, you can check your `next.config.js` for `async` or `return Promise`.
Potentially a plugin is returning a `Promise` from the webpack function.
diff --git a/errors/react-hydration-error.md b/errors/react-hydration-error.md
new file mode 100644
index 0000000000000..38ea8e05540b9
--- /dev/null
+++ b/errors/react-hydration-error.md
@@ -0,0 +1,53 @@
+# React Hydration Error
+
+#### Why This Error Occurred
+
+While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a [feature of React](https://reactjs.org/docs/react-dom.html#hydrate).
+
+This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.
+
+#### Possible Ways to Fix It
+
+In general this issue is caused by using a specific library or application code that is relying on something that could differ between pre-rendering and the browser. An example of this is using `window` in a component's rendering.
+
+An example:
+
+```jsx
+function MyComponent() {
+ // This condition depends on `window`. During the first render of the browser the `color` variable will be different
+ const color = typeof window !== 'undefined' ? 'red' : 'blue'
+ // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
+ return
+
+ Blog
+
+
Dynamic Route
diff --git a/examples/active-class-name/next.config.js b/examples/active-class-name/next.config.js
new file mode 100644
index 0000000000000..55e464ca31bfd
--- /dev/null
+++ b/examples/active-class-name/next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+ async rewrites() {
+ return [
+ {
+ source: '/blog',
+ destination: '/news',
+ },
+ ]
+ },
+}
diff --git a/examples/active-class-name/package.json b/examples/active-class-name/package.json
index a08741654ad62..6513b825ee0a6 100644
--- a/examples/active-class-name/package.json
+++ b/examples/active-class-name/package.json
@@ -1,16 +1,14 @@
{
- "name": "active-class-name",
- "version": "1.0.0",
+ "private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
- "author": "Remy Sharp ",
"dependencies": {
"next": "latest",
- "react": "^16.7.0",
- "react-dom": "^16.7.0"
- },
- "license": "MIT"
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "prop-types": "^15.7.2"
+ }
}
diff --git a/examples/active-class-name/pages/news.js b/examples/active-class-name/pages/news.js
new file mode 100644
index 0000000000000..74a8005a4c2c0
--- /dev/null
+++ b/examples/active-class-name/pages/news.js
@@ -0,0 +1,10 @@
+import Nav from '../components/Nav'
+
+const News = () => (
+ <>
+
+
+
+ )
+}
+
+export default LoginEntryPoint
diff --git a/examples/auth-with-stytch/components/LoginWithSMS.tsx b/examples/auth-with-stytch/components/LoginWithSMS.tsx
new file mode 100644
index 0000000000000..1c5e2fe229a89
--- /dev/null
+++ b/examples/auth-with-stytch/components/LoginWithSMS.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import SendOTPForm from './SendOTPForm'
+import VerifyOTPForm from './VerifyOTPForm'
+import StytchContainer from './StytchContainer'
+
+const LoginWithSMS = () => {
+ const [otpSent, setOTPSent] = useState(false)
+ const [phoneNumber, setPhoneNumber] = useState('')
+ const [methodId, setMethodId] = useState('')
+
+ return (
+
+ {!otpSent ? (
+
+ )
+}
+
+export default LoginWithSMS
diff --git a/examples/auth-with-stytch/components/SendOTPForm.tsx b/examples/auth-with-stytch/components/SendOTPForm.tsx
new file mode 100644
index 0000000000000..b2276b076084a
--- /dev/null
+++ b/examples/auth-with-stytch/components/SendOTPForm.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { sendOTP } from '../lib/otpUtils'
+import styles from '../styles/Home.module.css'
+
+type Props = {
+ phoneNumber: string
+ setMethodId: (methodId: string) => void
+ setOTPSent: (submitted: boolean) => void
+ setPhoneNumber: (phoneNumber: string) => void
+}
+
+const SendOTPForm = (props: Props): JSX.Element => {
+ const { phoneNumber, setMethodId, setOTPSent, setPhoneNumber } = props
+ const [isDisabled, setIsDisabled] = React.useState(true)
+
+ const isValidNumber = (phoneNumberValue: string) => {
+ // Regex validates phone numbers in (xxx)xxx-xxxx, xxx-xxx-xxxx, xxxxxxxxxx, and xxx.xxx.xxxx format
+ const regex = /^[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4}$/g
+ if (phoneNumberValue.match(regex)) {
+ return true
+ }
+ return false
+ }
+
+ const onPhoneNumberChange = (e: React.ChangeEvent<{ value: string }>) => {
+ setPhoneNumber(e.target.value)
+ if (isValidNumber(e.target.value)) {
+ setIsDisabled(false)
+ } else {
+ setIsDisabled(true)
+ }
+ }
+
+ const onSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (isValidNumber(phoneNumber)) {
+ const methodId = await sendOTP(phoneNumber)
+ setMethodId(methodId)
+ setOTPSent(true)
+ }
+ }
+
+ return (
+
+) => Promise
+
+export type ServerSideProps = ({
+ req,
+}: {
+ req: NextIronRequest
+}) => Promise
+
+const withSession = (handler: APIHandler | ServerSideProps) =>
+ withIronSession(handler, {
+ password: process.env.IRON_SESSION_PASSWORD || '',
+ cookieName: process.env.IRON_SESSION_COOKIE_NAME || '',
+ // if your localhost is served on http:// then disable the secure flag
+ cookieOptions: {
+ httpOnly: true,
+ secure: process.env.NODE_ENV === 'production',
+ },
+ })
+
+export default withSession
diff --git a/examples/auth-with-stytch/next-env.d.ts b/examples/auth-with-stytch/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/auth-with-stytch/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+
+
+
+ Stytch + Next.js example app
+
+
+
+ )
+}
+export default MyApp
diff --git a/examples/auth-with-stytch/pages/_document.tsx b/examples/auth-with-stytch/pages/_document.tsx
new file mode 100644
index 0000000000000..83d9080a67d71
--- /dev/null
+++ b/examples/auth-with-stytch/pages/_document.tsx
@@ -0,0 +1,33 @@
+import Document, {
+ Html,
+ Head,
+ Main,
+ NextScript,
+ DocumentContext,
+} from 'next/document'
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx: DocumentContext) {
+ const initialProps = await Document.getInitialProps(ctx)
+ return { ...initialProps }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ (null)
+ const router = useRouter()
+
+ useEffect(() => {
+ if (user) {
+ router.push('/profile')
+ }
+ })
+
+ const loginMethodMap: Record = {
+ [LoginMethod.API]:
+
+ )}
+
+ )
+}
+
+const getServerSidePropsHandler: ServerSideProps = async ({ req }) => {
+ // Get the user's session based on the request
+ const user = req.session.get('user') ?? null
+ const props: Props = { user }
+ return { props }
+}
+
+export const getServerSideProps = withSession(getServerSidePropsHandler)
+
+export default Profile
diff --git a/examples/auth-with-stytch/public/example-app-image.png b/examples/auth-with-stytch/public/example-app-image.png
new file mode 100644
index 0000000000000..2ccfa04b11d92
Binary files /dev/null and b/examples/auth-with-stytch/public/example-app-image.png differ
diff --git a/examples/auth-with-stytch/public/favicon.png b/examples/auth-with-stytch/public/favicon.png
new file mode 100644
index 0000000000000..63ccbc3212823
Binary files /dev/null and b/examples/auth-with-stytch/public/favicon.png differ
diff --git a/examples/auth-with-stytch/public/powered-by-stytch.svg b/examples/auth-with-stytch/public/powered-by-stytch.svg
new file mode 100644
index 0000000000000..09b0974a41859
--- /dev/null
+++ b/examples/auth-with-stytch/public/powered-by-stytch.svg
@@ -0,0 +1,17 @@
+
diff --git a/examples/auth-with-stytch/public/stars-and-stripes.png b/examples/auth-with-stytch/public/stars-and-stripes.png
new file mode 100644
index 0000000000000..08eb2fada9e00
Binary files /dev/null and b/examples/auth-with-stytch/public/stars-and-stripes.png differ
diff --git a/examples/auth-with-stytch/public/stytch-logo.svg b/examples/auth-with-stytch/public/stytch-logo.svg
new file mode 100644
index 0000000000000..e077032787330
--- /dev/null
+++ b/examples/auth-with-stytch/public/stytch-logo.svg
@@ -0,0 +1,8 @@
+
diff --git a/examples/auth-with-stytch/public/vercel-logotype-dark.svg b/examples/auth-with-stytch/public/vercel-logotype-dark.svg
new file mode 100644
index 0000000000000..bb5a15a24c33e
--- /dev/null
+++ b/examples/auth-with-stytch/public/vercel-logotype-dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/examples/auth-with-stytch/styles/Home.module.css b/examples/auth-with-stytch/styles/Home.module.css
new file mode 100644
index 0000000000000..d30afe1a25031
--- /dev/null
+++ b/examples/auth-with-stytch/styles/Home.module.css
@@ -0,0 +1,194 @@
+.root {
+ background-color: #ecfaff;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.container {
+ background-color: white;
+ border: 1px solid #ebebeb;
+ border-radius: 9px;
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 80px;
+ width: 500px;
+ height: 500px;
+}
+
+@media only screen and (max-width: 600px) {
+ .container {
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ width: 100%;
+ }
+}
+
+@media only screen and (max-width: 400px) {
+ .container {
+ padding: 40px;
+ }
+}
+
+.primaryButton {
+ background-color: #19303d;
+}
+
+.primaryButton:disabled {
+ background-color: #f3f5f6;
+ color: #5c727d;
+ opacity: 1;
+}
+
+/* Nav bar styles */
+
+.nav {
+ align-items: center;
+ background-color: #c7f1ff;
+ display: flex;
+ height: 64px;
+ justify-content: space-between;
+ padding: 0 28px;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+.navLogos {
+ align-items: center;
+ background-color: #c7f1ff;
+ display: flex;
+ height: 64px;
+ padding: 0 28px;
+ top: 0;
+}
+
+.navPlusSign {
+ padding: 0px 20px 10px 20px;
+ font-size: 30px;
+}
+
+.docsNavItem {
+ cursor: pointer;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 30px;
+}
+
+/* App entry styles */
+
+.entrySubHeader {
+ margin: 32px 0;
+}
+
+.entryButton {
+ background-color: #e5e8eb;
+ color: #19303d;
+ margin-bottom: 16px;
+}
+
+/* SMS login styles */
+
+.smsInstructions {
+ margin-top: 28px;
+}
+
+.smsDisclaimer {
+ color: #5c727d;
+ font-size: 14px;
+ line-height: 20px;
+ margin-bottom: 16px;
+ margin-top: 24px;
+}
+
+.telInput {
+ display: flex;
+ margin-top: 20px;
+ white-space: nowrap;
+}
+
+.flag {
+ background: url('/stars-and-stripes.png') no-repeat scroll 8px 16px;
+ border-right: none;
+ border-radius: 3px 0 0 3px;
+ width: 80px;
+ padding-left: 48px;
+}
+
+.phoneNumber {
+ border-left: none;
+ border-radius: 0 3px 3px 0;
+ padding-left: 0;
+ flex-grow: 1;
+ font-size: 18px;
+ width: calc(100%);
+}
+
+.passcodeContainer {
+ margin-top: 4px;
+}
+
+.passcodeInputContainer {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.passcodeInput {
+ border-radius: 3px;
+ font-size: 20px;
+ width: 48px;
+ height: 45px;
+ text-align: center;
+}
+
+.errorText {
+ color: red;
+ font-size: 14px;
+ height: 20px;
+ line-height: 20px;
+}
+
+.resendCodeContainer {
+ margin: 28px 0;
+}
+
+.resendCodeText {
+ color: #5c727d;
+ display: inline;
+ font-size: 16px;
+ line-height: 20px;
+}
+
+.resendCodeButton {
+ background-color: white;
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ height: fit-content;
+ padding: 0;
+ width: fit-content;
+}
+
+/* Profile styles */
+
+.profileSubHeader {
+ margin-bottom: 8px;
+ margin-top: 28px;
+}
+
+.code {
+ background: #f3f5f6;
+ border-radius: 5px;
+ color: #10232e;
+ padding: 8px;
+ font-size: 16px;
+ font-family: IBM Plex Mono, monospace;
+ margin-bottom: 16px;
+ white-space: pre-wrap;
+}
diff --git a/examples/auth-with-stytch/styles/globals.css b/examples/auth-with-stytch/styles/globals.css
new file mode 100644
index 0000000000000..c2b16ddb2f937
--- /dev/null
+++ b/examples/auth-with-stytch/styles/globals.css
@@ -0,0 +1,73 @@
+html,
+body {
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: IBM Plex Sans, 'sans-serif';
+}
+
+p {
+ color: #19303d;
+ font-size: 18px;
+ line-height: 25px;
+ margin: 0;
+}
+
+strong {
+ color: black;
+ font-weight: 500;
+}
+
+h2 {
+ font-size: 30px;
+ line-height: 40px;
+ margin: 0;
+}
+
+input {
+ border: 1px solid #adbcc5;
+ box-sizing: border-box;
+ border-radius: 3px;
+ color: #19303d;
+ font-size: 18px;
+ height: 45px;
+ line-height: 25px;
+ padding: 10px;
+}
+
+input:disabled {
+ background-color: white;
+ color: #19303d;
+}
+
+input:focus {
+ outline: 0;
+}
+
+input::placeholder {
+ color: #adbcc5;
+}
+
+button,
+input[type='submit'] {
+ border: none;
+ border-radius: 3px;
+ color: white;
+ font-size: 18px;
+ font-weight: 600;
+ height: 45px;
+ width: 100%;
+}
+
+button:hover,
+input[type='submit']:hover {
+ opacity: 0.8;
+}
diff --git a/examples/auth-with-stytch/tsconfig.json b/examples/auth-with-stytch/tsconfig.json
new file mode 100644
index 0000000000000..b8d597880a1ae
--- /dev/null
+++ b/examples/auth-with-stytch/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/auth0/.env.local.example b/examples/auth0/.env.local.example
index 4946e625c14e5..40f6027fa2d3d 100644
--- a/examples/auth0/.env.local.example
+++ b/examples/auth0/.env.local.example
@@ -2,8 +2,9 @@
NEXT_PUBLIC_AUTH0_CLIENT_ID=
NEXT_PUBLIC_AUTH0_SCOPE="openid profile"
NEXT_PUBLIC_AUTH0_DOMAIN=
-NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/api/callback"
-NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI="http://localhost:3000"
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+NEXT_PUBLIC_REDIRECT_URI="/api/callback"
+NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI="/"
# Secret environment variables only available to Node.js
AUTH0_CLIENT_SECRET=
diff --git a/examples/auth0/README.md b/examples/auth0/README.md
index 794c77b4668f4..e2b2d97bb4381 100644
--- a/examples/auth0/README.md
+++ b/examples/auth0/README.md
@@ -44,11 +44,12 @@ cp .env.local.example .env.local
Then, open `.env.local` and add the missing environment variables:
-- `NEXT_PUBLIC_AUTH0_DOMAIN` - Can be found in the Auth0 dashboard under `settings`.
+- `NEXT_PUBLIC_AUTH0_DOMAIN` - Can be found in the Auth0 dashboard under `settings`. (Should be prefixed with `https://`)
- `NEXT_PUBLIC_AUTH0_CLIENT_ID` - Can be found in the Auth0 dashboard under `settings`.
- `AUTH0_CLIENT_SECRET` - Can be found in the Auth0 dashboard under `settings`.
-- `NEXT_PUBLIC_REDIRECT_URI` - The url where Auth0 redirects back to, make sure a consistent url is used here.
-- `NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI` - Where to redirect after logging out
+- `NEXT_PUBLIC_BASE_URL` - The base url of the application.
+- `NEXT_PUBLIC_REDIRECT_URI` - The relative url path where Auth0 redirects back to.
+- `NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI` - Where to redirect after logging out.
- `SESSION_COOKIE_SECRET` - A unique secret used to encrypt the cookies, has to be at least 32 characters. You can use [this generator](https://generate-secret.vercel.app/32) to generate a value.
- `SESSION_COOKIE_LIFETIME` - How long a session lasts in seconds. The default is 2 hours.
diff --git a/examples/auth0/lib/auth0.js b/examples/auth0/lib/auth0.js
index 84fe93be3df93..ffcf3450c5890 100644
--- a/examples/auth0/lib/auth0.js
+++ b/examples/auth0/lib/auth0.js
@@ -1,18 +1,24 @@
import { initAuth0 } from '@auth0/nextjs-auth0'
export default initAuth0({
- clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID,
+ secret: process.env.SESSION_COOKIE_SECRET,
+ issuerBaseURL: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
+ baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+ clientID: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
- scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE || 'openid profile',
- domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
- redirectUri:
- process.env.NEXT_PUBLIC_REDIRECT_URI ||
- 'http://localhost:3000/api/callback',
- postLogoutRedirectUri:
- process.env.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI ||
- 'http://localhost:3000/',
+ routes: {
+ callback:
+ process.env.NEXT_PUBLIC_REDIRECT_URI ||
+ 'http://localhost:3000/api/callback',
+ postLogoutRedirect:
+ process.env.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI ||
+ 'http://localhost:3000',
+ },
+ authorizationParams: {
+ response_type: 'code',
+ scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE,
+ },
session: {
- cookieSecret: process.env.SESSION_COOKIE_SECRET,
- cookieLifetime: Number(process.env.SESSION_COOKIE_LIFETIME) || 7200,
+ absoluteDuration: process.env.SESSION_COOKIE_LIFETIME,
},
})
diff --git a/examples/auth0/package.json b/examples/auth0/package.json
index 16f771f656d6d..96caf0e6d5c95 100644
--- a/examples/auth0/package.json
+++ b/examples/auth0/package.json
@@ -1,16 +1,15 @@
{
- "name": "auth0",
+ "private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
- "author": "",
- "license": "MIT",
"dependencies": {
- "@auth0/nextjs-auth0": "^0.8.0",
+ "@auth0/nextjs-auth0": "^1.4.2",
"next": "latest",
- "react": "^16.12.0",
- "react-dom": "^16.12.0"
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "tslib": "^2.2.0"
}
}
diff --git a/examples/auth0/pages/advanced/ssr-profile.js b/examples/auth0/pages/advanced/ssr-profile.js
index 84d96d4dbee4c..bbe88c59c751c 100644
--- a/examples/auth0/pages/advanced/ssr-profile.js
+++ b/examples/auth0/pages/advanced/ssr-profile.js
@@ -21,7 +21,7 @@ export async function getServerSideProps({ req, res }) {
// Here you can check authentication status directly before rendering the page,
// however the page would be a serverless function, which is more expensive and
// slower than a static page with client side authentication
- const session = await auth0.getSession(req)
+ const session = await auth0.getSession(req, res)
if (!session || !session.user) {
res.writeHead(302, {
diff --git a/examples/auth0/pages/api/callback.js b/examples/auth0/pages/api/callback.js
index e06f9657d0d56..a1f9318dee344 100644
--- a/examples/auth0/pages/api/callback.js
+++ b/examples/auth0/pages/api/callback.js
@@ -2,7 +2,7 @@ import auth0 from '../../lib/auth0'
export default async function callback(req, res) {
try {
- await auth0.handleCallback(req, res, { redirectTo: '/' })
+ await auth0.handleCallback(req, res)
} catch (error) {
console.error(error)
res.status(error.status || 500).end(error.message)
diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md
index a7e56f8b5f0dc..0f6d8517a7b75 100644
--- a/examples/basic-css/README.md
+++ b/examples/basic-css/README.md
@@ -2,6 +2,12 @@
Next.js has built-in support for [CSS Modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) allowing you to write scoped CSS by automatically creating a unique class name. CSS Module files can be imported anywhere in your application and you don't have to worry about collisions.
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-css)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/basic-css/package.json b/examples/basic-css/package.json
index 99b864c87fd0d..349de02f4d84b 100644
--- a/examples/basic-css/package.json
+++ b/examples/basic-css/package.json
@@ -1,6 +1,5 @@
{
- "name": "basic-css",
- "version": "1.0.0",
+ "private": true,
"scripts": {
"dev": "next",
"build": "next build",
@@ -8,8 +7,7 @@
},
"dependencies": {
"next": "latest",
- "react": "^16.7.0",
- "react-dom": "^16.7.0"
- },
- "license": "MIT"
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ }
}
diff --git a/examples/basic-export/README.md b/examples/basic-export/README.md
index 06f34a95483e2..e53128be24960 100644
--- a/examples/basic-export/README.md
+++ b/examples/basic-export/README.md
@@ -2,6 +2,12 @@
This example shows the most basic usage of `next export`. Without `exportPathMap`.
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/basic-export)
+
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
diff --git a/examples/basic-export/package.json b/examples/basic-export/package.json
index f3b2ce33a2120..d7485059ef3fc 100644
--- a/examples/basic-export/package.json
+++ b/examples/basic-export/package.json
@@ -1,6 +1,5 @@
{
- "name": "basic-export",
- "version": "1.0.0",
+ "private": true,
"scripts": {
"dev": "next",
"build": "next build && next export",
@@ -8,8 +7,7 @@
},
"dependencies": {
"next": "latest",
- "react": "^16.7.0",
- "react-dom": "^16.7.0"
- },
- "license": "MIT"
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ }
}
diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
index c9156b6a3be42..15856d06a4942 100644
--- a/examples/blog-starter-typescript/README.md
+++ b/examples/blog-starter-typescript/README.md
@@ -8,7 +8,11 @@ The blog posts are stored in `/_posts` as Markdown files with front matter suppo
To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.
-## How to use
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter-typescript)
## Deploy your own
@@ -16,6 +20,8 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript&project-name=blog-starter-typescript&repository-name=blog-starter-typescript)
+## How to use
+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
@@ -30,6 +36,4 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
# Notes
-This blog-starter-typescript uses [Tailwind CSS](https://tailwindcss.com). To control the generated stylesheet's filesize, this example uses Tailwind CSS' v2.0 [`purge` option](https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css) to remove unused CSS.
-
-[Tailwind CSS v2.0 no longer supports Node.js 8 or 10](https://tailwindcss.com/docs/upgrading-to-v2#upgrade-to-node-js-12-13-or-higher). To build your CSS you'll need to ensure you are running Node.js 12.13.0 or higher in both your local and CI environments.
+`blog-starter-typescript` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).
diff --git a/examples/blog-starter-typescript/components/alert.tsx b/examples/blog-starter-typescript/components/alert.tsx
index f804ff6192868..067672f380826 100644
--- a/examples/blog-starter-typescript/components/alert.tsx
+++ b/examples/blog-starter-typescript/components/alert.tsx
@@ -10,8 +10,8 @@ const Alert = ({ preview }: Props) => {
return (
@@ -21,7 +21,7 @@ const Alert = ({ preview }: Props) => {
This page is a preview.{' '}
Click here
{' '}
@@ -32,7 +32,7 @@ const Alert = ({ preview }: Props) => {
The source code for this blog is{' '}
available on GitHub
diff --git a/examples/blog-starter-typescript/components/cover-image.tsx b/examples/blog-starter-typescript/components/cover-image.tsx
index 6497d4c1bb85a..78def80024126 100644
--- a/examples/blog-starter-typescript/components/cover-image.tsx
+++ b/examples/blog-starter-typescript/components/cover-image.tsx
@@ -12,8 +12,8 @@ const CoverImage = ({ title, src, slug }: Props) => {
)
diff --git a/examples/blog-starter-typescript/components/footer.tsx b/examples/blog-starter-typescript/components/footer.tsx
index e8a7fdce4cd0d..d2bcba33363b6 100644
--- a/examples/blog-starter-typescript/components/footer.tsx
+++ b/examples/blog-starter-typescript/components/footer.tsx
@@ -3,10 +3,10 @@ import { EXAMPLE_PATH } from '../lib/constants'
const Footer = () => {
return (
-
Hello World!
+} +``` + +How to fix it: + +```jsx +// In order to prevent the first render from being different you can use `useEffect` which is only executed in the browser and is executed during hydration +import { useEffect, useState } from 'react' +function MyComponent() { + // The default value is 'blue', it will be used during pre-rendering and the first render in the browser (hydration) + const [color, setColor] = useState('blue') + // During hydration `useEffect` is called. `window` is available in `useEffect`. In this case because we know we're in the browser checking for window is not needed. If you need to read something from window that is fine. + // By calling `setColor` in `useEffect` a render is triggered after hydrating, this causes the "browser specific" value to be available. In this case 'red'. + useEffect(() => setColor('red'), []) + // As color is a state passed as a prop there is no mismatch between what was rendered server-side vs what was rendered in the first render. After useEffect runs the color is set to 'red' + returnHello World!
+} +``` + +Common causes with css-in-js libraries: + +- When using Styled Components / Emotion + - When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the application has to follow the Next.js example for the library. For example if `pages/_document` is missing and the Babel plugin is not added. + - Possible fix for Styled Components: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components + - If you want to leverage Styled Components with the new Next.js Compiler in Next.js 12 there is an [experimental flag available](https://github.com/vercel/next.js/discussions/30174#discussion-3643870) + - Possible fix for Emotion: https://github.com/vercel/next.js/tree/canary/examples/with-emotion +- When using other css-in-js libraries + - Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples) + +### Useful Links + +- [React Hydration Documentation](https://reactjs.org/docs/react-dom.html#hydrate) +- [Josh Comeau's article on React Hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/) diff --git a/errors/react-version.md b/errors/react-version.md index cfa4412e88461..713254102491b 100644 --- a/errors/react-version.md +++ b/errors/react-version.md @@ -5,7 +5,7 @@ Your project is using an old version of `react` or `react-dom` that does not meet the suggested minimum version requirement. -Next.js suggests using, at a minimum, `react@17.0.1` and `react-dom@17.0.1`. +Next.js suggests using, at a minimum, `react@17.0.2` and `react-dom@17.0.2`. Older versions of `react` and `react-dom` do work with Next.js, however, they do not enable all of Next.js' features. @@ -39,8 +39,8 @@ yarn add react@latest react-dom@latest ```json { "dependencies": { - "react": "^17.0.1", - "react-dom": "^17.0.1" + "react": "^17.0.2", + "react-dom": "^17.0.2" } } ``` diff --git a/errors/rewrite-auto-export-fallback.md b/errors/rewrite-auto-export-fallback.md index a16fa7125639d..af712a447757f 100644 --- a/errors/rewrite-auto-export-fallback.md +++ b/errors/rewrite-auto-export-fallback.md @@ -10,7 +10,7 @@ Rewriting to these pages are not yet supported since rewrites are not available For fallback SSG pages you can add the page to the list of [prerendered paths](https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required). -For static dynamic routes, you will currently need to either rewrite to non-dynamic route or opt the page out of the static optimization with [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) +For static dynamic routes, you will currently need to either rewrite to non-dynamic route or opt the page out of the static optimization with [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md) ### Useful Links diff --git a/errors/sharp-missing-in-production.md b/errors/sharp-missing-in-production.md new file mode 100644 index 0000000000000..96903efad9ca5 --- /dev/null +++ b/errors/sharp-missing-in-production.md @@ -0,0 +1,19 @@ +# Sharp Missing In Production + +#### Why This Error Occurred + +The `next/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. For a production environment using `next start`, it is strongly recommended you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. + +You are seeing this error because Image Optimization in production mode (`next start`) was detected. + +#### Possible Ways to Fix It + +- Install `sharp` by running `yarn add sharp` in your project directory and then reboot the server by running `next start` again +- If `sharp` is already installed but can't be resolved, set the `NEXT_SHARP_PATH` environment variable such as `NEXT_SHARP_PATH=/tmp/node_modules/sharp next start` + +> Note: This is not necessary for Vercel deployments, since `sharp` is installed automatically for you. + +### Useful Links + +- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization) +- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image) diff --git a/errors/sharp-version-avif.md b/errors/sharp-version-avif.md new file mode 100644 index 0000000000000..dcd90aea36629 --- /dev/null +++ b/errors/sharp-version-avif.md @@ -0,0 +1,24 @@ +# Sharp Version Does Not Support AVIF + +#### Why This Error Occurred + +The `next/image` component's default loader uses [`sharp`](https://www.npmjs.com/package/sharp) if its installed. + +You are seeing this error because you have an outdated version of [`sharp`](https://www.npmjs.com/package/sharp) installed that does not support the AVIF image format. + +AVIF support was added to [`sharp`](https://www.npmjs.com/package/sharp) in version 0.27.0 (December 2020) so your installed version is likely older. + +#### Possible Ways to Fix It + +- Install the latest version of `sharp` by running `yarn add sharp@latest` in your project directory +- If you're using the `NEXT_SHARP_PATH` environment variable, then update the `sharp` install referenced in that path, for example `cd "$NEXT_SHARP_PATH/../" && yarn add sharp@latest` +- If you cannot upgrade `sharp`, you can instead disable AVIF by configuring [`formats`](https://nextjs.org/docs/api-reference/next/image#image-formats) in your `next.config.js` + +After choosing an option above, reboot the server by running either `next dev` or `next start` for development or production respectively. + +> Note: This is not necessary for Vercel deployments, since `sharp` is installed automatically for you. + +### Useful Links + +- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization) +- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image) diff --git a/errors/static-dir-deprecated.md b/errors/static-dir-deprecated.md index 9a8138e987ad4..76e13986aed9a 100644 --- a/errors/static-dir-deprecated.md +++ b/errors/static-dir-deprecated.md @@ -8,7 +8,7 @@ The reason we want to support a `public` directory instead is to not require the #### Possible Ways to Fix It -You can move your `static` directory inside of the `public` directory and all URLs will remain the same as they were before. +You can move your `static` directory inside of the `public` directory and all URLs will stay the same as they were before. **Before** diff --git a/errors/static-page-generation-timeout.md b/errors/static-page-generation-timeout.md new file mode 100644 index 0000000000000..c8cc05e24f341 --- /dev/null +++ b/errors/static-page-generation-timeout.md @@ -0,0 +1,19 @@ +# Static page generation timed out after multiple attempts + +#### Why This Error Occurred + +Next.js tries to restart the worker pool of the static page generation when no progress happens for a while, to avoid hanging builds. + +When restarted it will retry all uncompleted jobs, but if a job was unsuccessfully attempted multiple times, this will lead to an error. + +#### Possible Ways to Fix It + +- Make sure that there is no infinite loop during execution. +- Make sure all Promises in `getStaticPaths`/`getStaticProps` `resolve` or `reject` correctly. +- Avoid very long timeouts for network requests. +- Increase the timeout by changing the `staticPageGenerationTimeout` configuration option (default `60` in seconds). + +### Useful Links + +- [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths.md) +- [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching/get-static-props.md) diff --git a/errors/swc-disabled.md b/errors/swc-disabled.md new file mode 100644 index 0000000000000..701f260c785b4 --- /dev/null +++ b/errors/swc-disabled.md @@ -0,0 +1,17 @@ +# SWC disabled + +#### Why This Message Occurred + +Next.js now uses Rust-based compiler [SWC](https://swc.rs/) to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh. + +Next.js provides full backwards compatibility with applications that have [custom Babel configuration](https://nextjs.org/docs/advanced-features/customizing-babel-config). All transformations that Next.js handles by default like styled-jsx and tree-shaking of `getStaticProps` / `getStaticPaths` / `getServerSideProps` have been ported to Rust. + +When an application has custom Babel configuration Next.js will automatically opt-out of using SWC for compiling JavaScript/Typescript and will fall back to using Babel in the same way that it was used in Next.js 11. + +Many of the integrations with external libraries that currently require custom Babel transformations will be ported to Rust-based SWC transforms in the near future. These include but are not limited to: + +- Styled Components +- Emotion +- Relay + +In order to prioritize transforms that will help you adopt SWC please provide your `.babelrc` on [the feedback thread](https://github.com/vercel/next.js/discussions/30174). diff --git a/errors/swc-minify-enabled.md b/errors/swc-minify-enabled.md new file mode 100644 index 0000000000000..712affcf27a7a --- /dev/null +++ b/errors/swc-minify-enabled.md @@ -0,0 +1,7 @@ +# SWC minify enabled + +#### Why This Message Occurred + +The application has enabled `swcMinify` in `next.config.js`. By opting in minification will happen using the [SWC](https://swc.rs) minifier instead of Terser. This new minifier is 7x faster than Terser with comparable output. We're actively working on optimizing the output size and minification speed further. + +If you have feedback about the minification, please provide it on [the feedback thread](https://github.com/vercel/next.js/discussions/30237). diff --git a/errors/template.txt b/errors/template.txt new file mode 100644 index 0000000000000..3aa3e131acac5 --- /dev/null +++ b/errors/template.txt @@ -0,0 +1,13 @@ +# {{title}} + +#### Why This Error Occurred + + + +#### Possible Ways to Fix It + + + +### Useful Links + + diff --git a/errors/threw-undefined.md b/errors/threw-undefined.md index 0d4129ef4f115..4804488cafc49 100644 --- a/errors/threw-undefined.md +++ b/errors/threw-undefined.md @@ -1,9 +1,21 @@ -# Threw undefined in render +# Threw `undefined`/`null` #### Why This Error Occurred -Somewhere in your code you `throw` an `undefined` value. Since this isn't a valid error there isn't a stack trace. We show this error instead to let you know what to look for. +Somewhere in your code you `throw` an `undefined` or `null` value. Since this isn't a valid error there isn't a stack trace. We show this error instead to let you know what to look for. + +```js +function getData() { + let error + throw error +} + +function Page() { + const error = data?.error || null + throw error +} +``` #### Possible Ways to Fix It -Look in your pages and find where an error could be throwing `undefined` +Look in your pages and find where an error could be throwing `undefined` or `null` values and ensure `new Error()` is used instead. diff --git a/errors/url-deprecated.md b/errors/url-deprecated.md index 50db5b6b5ad7f..df352d8e07068 100644 --- a/errors/url-deprecated.md +++ b/errors/url-deprecated.md @@ -10,7 +10,7 @@ The reason this is going away is that we want to make things very predictable an #### Possible Ways to Fix It -https://github.com/zeit/next-codemod#url-to-withrouter +https://nextjs.org/docs/advanced-features/codemods#url-to-withrouter Since Next 5 we provide a way to explicitly inject the Next.js router object into pages and all their descending components. The `router` property that is injected will hold the same values as `url`, like `pathname`, `asPath`, and `query`. @@ -33,4 +33,4 @@ export default withRouter(Page) We provide a codemod (a code to code transformation) to automatically change the `url` property usages to `withRouter`. -You can find this codemod and instructions on how to run it here: https://github.com/zeit/next-codemod#url-to-withrouter +You can find this codemod and instructions on how to run it here: https://nextjs.org/docs/advanced-features/codemods#url-to-withrouter diff --git a/errors/webpack5.md b/errors/webpack5.md index 97bab43d9b93d..a7f0d6f72bcde 100644 --- a/errors/webpack5.md +++ b/errors/webpack5.md @@ -2,17 +2,19 @@ #### Why This Message Occurred -Next.js will soon adopt webpack 5 as the default for compilation. We've spent a lot of effort into ensuring the transition from webpack 4 to 5 will be as smooth as possible. For example Next.js now comes with both webpack 4 and 5 allowing you to adopt webpack 5 by adding a flag to your `next.config.js`: +Next.js has adopted webpack 5 as the default for compilation. We've spent a lot of effort into ensuring the transition from webpack 4 to 5 will be as smooth as possible. + +Your application currently has webpack 5 disabled using the `webpack5: false` flag which has been removed in Next.js 12: ```js module.exports = { - future: { - webpack5: true, - }, + // Webpack 5 is enabled by default + // You can still use webpack 4 while upgrading to the latest version of Next.js by adding the "webpack5: false" flag + webpack5: false, } ``` -Adopting webpack 5 in your application has many benefits, notably: +Using webpack 5 in your application has many benefits, notably: - Improved Disk Caching: `next build` is significantly faster on subsequent builds - Improved Fast Refresh: Fast Refresh work is prioritized @@ -22,11 +24,12 @@ Adopting webpack 5 in your application has many benefits, notably: - Support for web workers using `new Worker(new URL("worker.js", import.meta.url))` - Support for `exports`/`imports` field in `package.json` -In upcoming releases we'll gradually roll out webpack 5 to applications that are compatible with webpack 5: +In the past releases we have gradually rolled out webpack 5 to Next.js applications: -- In the next minor version we'll automatically opt-in applications without custom webpack configuration in `next.config.js` -- In the next minor version we'll automatically opt-in applications that do not have a `next.config.js` -- In the next major version we'll enable webpack 5 by default. You'll still be able to opt-out and use webpack 4 to help with backwards compatibility +- In Next.js 10.2 we automatically opted-in applications without custom webpack configuration in `next.config.js` +- In Next.js 10.2 we automatically opted-in applications that do not have a `next.config.js` +- In Next.js 11 webpack 5 was enabled by default for all applications. You could still opt-out and use webpack 4 to help with backwards compatibility using `webpack5: false` in `next.config.js` +- In Next.js 12 webpack 4 support was removed. #### Custom webpack configuration @@ -34,7 +37,7 @@ In case you do have custom webpack configuration, either through custom plugins - When using `next-transpile-modules` make sure you use the latest version which includes [this patch](https://github.com/martpie/next-transpile-modules/pull/179) - When using `@zeit/next-css` / `@zeit/next-sass` make sure you use the [built-in CSS/Sass support](https://nextjs.org/docs/basic-features/built-in-css-support) instead -- When using `@zeit/next-preact` use [this example](https://github.com/vercel/next-plugins/tree/master/packages/next-preact) instead +- When using `@zeit/next-preact` use [this example](https://github.com/vercel/next.js/tree/canary/examples/using-preact) instead - When using `@zeit/next-source-maps` use the [built-in production Source Map support](https://nextjs.org/docs/advanced-features/source-maps) - When using webpack plugins make sure they're upgraded to the latest version, in most cases the latest version will include webpack 5 support. In some cases these upgraded webpack plugins will only support webpack 5. diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md index 03d46cea4d39e..902d79e24b7fe 100644 --- a/examples/active-class-name/README.md +++ b/examples/active-class-name/README.md @@ -2,6 +2,12 @@ ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/active-class-name/components/ActiveLink.js b/examples/active-class-name/components/ActiveLink.js index 0db59b6a9227a..7ada49c52056e 100644 --- a/examples/active-class-name/components/ActiveLink.js +++ b/examples/active-class-name/components/ActiveLink.js @@ -1,20 +1,46 @@ +import { useState, useEffect } from 'react' import { useRouter } from 'next/router' import PropTypes from 'prop-types' import Link from 'next/link' import React, { Children } from 'react' const ActiveLink = ({ children, activeClassName, ...props }) => { - const { asPath } = useRouter() + const { asPath, isReady } = useRouter() + const child = Children.only(children) const childClassName = child.props.className || '' + const [className, setClassName] = useState(childClassName) + + useEffect(() => { + // Check if the router fields are updated client-side + if (isReady) { + // Dynamic route will be matched via props.as + // Static route will be matched via props.href + const linkPathname = new URL(props.as || props.href, location.href) + .pathname + + // Using URL().pathname to get rid of query and hash + const activePathname = new URL(asPath, location.href).pathname + + const newClassName = + linkPathname === activePathname + ? `${childClassName} ${activeClassName}`.trim() + : childClassName - // pages/index.js will be matched via props.href - // pages/about.js will be matched via props.href - // pages/[slug].js will be matched via props.as - const className = - asPath === props.href || asPath === props.as - ? `${childClassName} ${activeClassName}`.trim() - : childClassName + if (newClassName !== className) { + setClassName(newClassName) + } + } + }, [ + asPath, + isReady, + props.as, + props.href, + childClassName, + activeClassName, + setClassName, + className, + ]) return ( diff --git a/examples/active-class-name/components/Nav.js b/examples/active-class-name/components/Nav.js index 2c710bb42468f..921cc15120bfd 100644 --- a/examples/active-class-name/components/Nav.js +++ b/examples/active-class-name/components/Nav.js @@ -22,6 +22,11 @@ const Nav = () => ( About +Hello, I'm the news page
+ +) + +export default News diff --git a/examples/amp-first/README.md b/examples/amp-first/README.md index f1734f4feb8d8..4db9d29709f07 100644 --- a/examples/amp-first/README.md +++ b/examples/amp-first/README.md @@ -1,6 +1,6 @@ # AMP First Boilerplate ⚡ -This example sets up the boilerplate for an AMP First Site. You can see a live version [here](https://my-next-app.sebastianbenz.vercel.app). The boilerplate includes the following features: +This example sets up the boilerplate for an AMP First Site. You can see a [live version here](https://my-next-app.sebastianbenz.vercel.app). The boilerplate includes the following features: - AMP Extension helpers (`amp-state`, `amp-script`, ...) - AMP Serviceworker integration diff --git a/examples/amp-first/package.json b/examples/amp-first/package.json index 3c62fecf57f37..349de02f4d84b 100644 --- a/examples/amp-first/package.json +++ b/examples/amp-first/package.json @@ -1,6 +1,5 @@ { - "name": "amp-first", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -8,8 +7,7 @@ }, "dependencies": { "next": "latest", - "react": "^16.10.2", - "react-dom": "^16.10.2" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/amp-story/package.json b/examples/amp-story/package.json index d577702ebefaf..349de02f4d84b 100644 --- a/examples/amp-story/package.json +++ b/examples/amp-story/package.json @@ -1,6 +1,5 @@ { - "name": "amp-story", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -8,8 +7,7 @@ }, "dependencies": { "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/amp/package.json b/examples/amp/package.json index d033597980c09..349de02f4d84b 100644 --- a/examples/amp/package.json +++ b/examples/amp/package.json @@ -1,6 +1,5 @@ { - "name": "amp", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -8,8 +7,7 @@ }, "dependencies": { "next": "latest", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md index abea34df8353d..02e1673ccd3b8 100644 --- a/examples/analyze-bundles/README.md +++ b/examples/analyze-bundles/README.md @@ -1,6 +1,12 @@ # Analyzer Bundles example -This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/master/packages/next-bundle-analyzer) +This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) + +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/analyze-bundles) ## Deploy your own @@ -27,3 +33,11 @@ npm run analyze # or yarn analyze ``` + +Once the build is completed, you can inspect the bundle by running: + +```bash +npm run serve +# or +yarn serve +``` diff --git a/examples/analyze-bundles/package.json b/examples/analyze-bundles/package.json index a5caa9e790812..a40dca11de1d7 100644 --- a/examples/analyze-bundles/package.json +++ b/examples/analyze-bundles/package.json @@ -1,19 +1,21 @@ { - "name": "analyze-bundles", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", "start": "next start", - "analyze": "cross-env ANALYZE=true yarn build" + "analyze": "cross-env ANALYZE=true yarn build", + "serve": "serve .next/analyze" }, "dependencies": { "@next/bundle-analyzer": "^9.1.4", "cross-env": "^6.0.3", "faker": "^4.1.0", "next": "latest", - "react": "^16.8.0", - "react-dom": "^16.8.0" + "react": "^17.0.2", + "react-dom": "^17.0.2" }, - "license": "MIT" + "devDependencies": { + "serve": "^11.3.2" + } } diff --git a/examples/api-routes-apollo-server-and-client-auth/README.md b/examples/api-routes-apollo-server-and-client-auth/README.md index 68ca3be46917e..6385acf21368a 100644 --- a/examples/api-routes-apollo-server-and-client-auth/README.md +++ b/examples/api-routes-apollo-server-and-client-auth/README.md @@ -4,6 +4,12 @@ In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes-apollo-server-and-client-auth/package.json b/examples/api-routes-apollo-server-and-client-auth/package.json index 7c0ddd6572ff4..448f8254297e2 100644 --- a/examples/api-routes-apollo-server-and-client-auth/package.json +++ b/examples/api-routes-apollo-server-and-client-auth/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-apollo-server-and-client-auth", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -15,9 +14,8 @@ "graphql": "^14.0.2", "next": "latest", "prop-types": "^15.6.2", - "react": "^16.7.0", - "react-dom": "^16.7.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "uuid": "8.1.0" - }, - "license": "MIT" + } } diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md index 193136027c813..96c454e0527c6 100644 --- a/examples/api-routes-apollo-server-and-client/README.md +++ b/examples/api-routes-apollo-server-and-client/README.md @@ -4,6 +4,12 @@ In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes-apollo-server-and-client/package.json b/examples/api-routes-apollo-server-and-client/package.json index 43263e3486f16..c1de5dc4ba83f 100644 --- a/examples/api-routes-apollo-server-and-client/package.json +++ b/examples/api-routes-apollo-server-and-client/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-apollo-server-and-client", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -12,8 +11,7 @@ "graphql": "^14.0.2", "next": "latest", "prop-types": "^15.6.2", - "react": "^16.7.0", - "react-dom": "^16.7.0" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/api-routes-apollo-server/README.md b/examples/api-routes-apollo-server/README.md index 320060be87784..5d1066048ddc3 100644 --- a/examples/api-routes-apollo-server/README.md +++ b/examples/api-routes-apollo-server/README.md @@ -1,6 +1,12 @@ # Consume local Apollo GraphQL schema to create Static Generation export -Next.js ships with two forms of pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This example shows how to perform Static Generation using a local [Apollo GraphQL](https://www.apollographql.com/docs/apollo-server/) schema within [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation). The end result is a Next.js application that uses one Apollo GraphQL schema to generate static pages at build time and also serve a GraphQL [API Route](https://nextjs.org/docs/api-routes/introduction) at runtime. +Next.js ships with two forms of pre-rendering: [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) and [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This example shows how to perform Static Generation using a local [Apollo GraphQL](https://www.apollographql.com/docs/apollo-server/) schema within [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) and [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths.md). The end result is a Next.js application that uses one Apollo GraphQL schema to generate static pages at build time and also serve a GraphQL [API Route](https://nextjs.org/docs/api-routes/introduction) at runtime. + +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-apollo-server) ## Deploy your own diff --git a/examples/api-routes-apollo-server/package.json b/examples/api-routes-apollo-server/package.json index c42045d94020b..88af4336ccc68 100644 --- a/examples/api-routes-apollo-server/package.json +++ b/examples/api-routes-apollo-server/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-apollo-server", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -11,8 +10,7 @@ "apollo-server-micro": "2.13.1", "graphql": "15.0.0", "next": "latest", - "react": "16.13.1", - "react-dom": "16.13.1" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/api-routes-cors/README.md b/examples/api-routes-cors/README.md index 5fdee8ab744b8..5ba1b348401fc 100644 --- a/examples/api-routes-cors/README.md +++ b/examples/api-routes-cors/README.md @@ -4,6 +4,12 @@ Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) This example shows how to create an `API` endpoint with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers, using the [cors](https://github.com/expressjs/cors) package. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-cors) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes-cors/package.json b/examples/api-routes-cors/package.json index 0338eb2648475..bc1300882acc4 100644 --- a/examples/api-routes-cors/package.json +++ b/examples/api-routes-cors/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-cors", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -9,8 +8,7 @@ "dependencies": { "cors": "2.8.5", "next": "latest", - "react": "^16.13.1", - "react-dom": "^16.13.1" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2" + } } diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md index 1a31922c94a90..fe53eb534cb42 100644 --- a/examples/api-routes-graphql/README.md +++ b/examples/api-routes-graphql/README.md @@ -1,6 +1,12 @@ # API routes with GraphQL server -Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/main/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app. +Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/main/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app. + +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-graphql) ## Deploy your own diff --git a/examples/api-routes-graphql/package.json b/examples/api-routes-graphql/package.json index eb2b811a582b6..e4329bea00b67 100644 --- a/examples/api-routes-graphql/package.json +++ b/examples/api-routes-graphql/package.json @@ -1,18 +1,17 @@ { - "name": "api-routes-graphql", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "apollo-server-micro": "2.11.0", - "graphql": "14.6.0", + "apollo-server-micro": "^3.0.1", + "graphql": "^15.5.1", + "micro": "^9.3.4", "next": "latest", - "react": "16.13.1", - "react-dom": "16.13.1", - "swr": "0.1.18" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2", + "swr": "^0.5.6" + } } diff --git a/examples/api-routes-graphql/pages/api/graphql.js b/examples/api-routes-graphql/pages/api/graphql.js index 0dcb066bbcbdc..0a29f3ce88987 100644 --- a/examples/api-routes-graphql/pages/api/graphql.js +++ b/examples/api-routes-graphql/pages/api/graphql.js @@ -19,10 +19,31 @@ const resolvers = { const apolloServer = new ApolloServer({ typeDefs, resolvers }) +const startServer = apolloServer.start() + +export default async function handler(req, res) { + res.setHeader('Access-Control-Allow-Credentials', 'true') + res.setHeader( + 'Access-Control-Allow-Origin', + 'https://studio.apollographql.com' + ) + res.setHeader( + 'Access-Control-Allow-Headers', + 'Origin, X-Requested-With, Content-Type, Accept' + ) + if (req.method === 'OPTIONS') { + res.end() + return false + } + + await startServer + await apolloServer.createHandler({ + path: '/api/graphql', + })(req, res) +} + export const config = { api: { bodyParser: false, }, } - -export default apolloServer.createHandler({ path: '/api/graphql' }) diff --git a/examples/api-routes-middleware/README.md b/examples/api-routes-middleware/README.md index 7ed15b6ff90a5..44a12e118ddcb 100644 --- a/examples/api-routes-middleware/README.md +++ b/examples/api-routes-middleware/README.md @@ -2,6 +2,12 @@ Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how to implement simple `middleware` to wrap around your `API` endpoints. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-middleware) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes-middleware/package.json b/examples/api-routes-middleware/package.json index a7e21e6f70abb..ac005757491a9 100644 --- a/examples/api-routes-middleware/package.json +++ b/examples/api-routes-middleware/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-middleware", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -9,9 +8,8 @@ "dependencies": { "cookie": "0.4.0", "next": "latest", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^17.0.2", + "react-dom": "^17.0.2", "swr": "0.1.18" - }, - "license": "MIT" + } } diff --git a/examples/api-routes-rate-limit/README.md b/examples/api-routes-rate-limit/README.md index e3397b2a9fc4e..9328d25846365 100644 --- a/examples/api-routes-rate-limit/README.md +++ b/examples/api-routes-rate-limit/README.md @@ -16,6 +16,12 @@ X-RateLimit-Limit: 10 X-RateLimit-Remaining: 0 ``` +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rate-limit) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): @@ -27,9 +33,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: ```bash -npx create-next-app --example api-routes api-routes-rate-limit +npx create-next-app --example api-routes-rate-limit api-routes-rate-limit-app # or -yarn create next-app --example api-routes api-routes-rate-limit +yarn create next-app --example api-routes-rate-limit api-routes-rate-limit-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)). diff --git a/examples/api-routes-rate-limit/package.json b/examples/api-routes-rate-limit/package.json index b43827f60cb63..61b3034ed6410 100644 --- a/examples/api-routes-rate-limit/package.json +++ b/examples/api-routes-rate-limit/package.json @@ -1,6 +1,4 @@ { - "name": "nextjs-rate-limit", - "version": "0.0.0", "private": true, "scripts": { "dev": "next dev", @@ -9,9 +7,9 @@ }, "dependencies": { "lru-cache": "^6.0.0", - "next": "10.0.3", - "react": "17.0.1", - "react-dom": "17.0.1", + "next": "latest", + "react": "^17.0.2", + "react-dom": "^17.0.2", "uuid": "^8.3.1" } } diff --git a/examples/api-routes-rest/README.md b/examples/api-routes-rest/README.md index 1136ed9d7efbb..c8f176bd5e2c1 100644 --- a/examples/api-routes-rest/README.md +++ b/examples/api-routes-rest/README.md @@ -2,6 +2,12 @@ Next.js ships with [API routes](https://github.com/vercel/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how it can be used to create your [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) `API`. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes-rest) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes-rest/package.json b/examples/api-routes-rest/package.json index 883f3d7720f03..4b23e0ce0f192 100644 --- a/examples/api-routes-rest/package.json +++ b/examples/api-routes-rest/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes-rest", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -8,9 +7,8 @@ }, "dependencies": { "next": "latest", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^17.0.2", + "react-dom": "^17.0.2", "swr": "^0.1.18" - }, - "license": "MIT" + } } diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md index 334bf15feedb0..87e9fa6321f9d 100644 --- a/examples/api-routes/README.md +++ b/examples/api-routes/README.md @@ -2,6 +2,12 @@ Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently. +## Preview + +Preview the example live on [StackBlitz](http://stackblitz.com/): + +[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/api-routes) + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): diff --git a/examples/api-routes/data.js b/examples/api-routes/data.js index ce2acde5041c5..f57a9d0786fdb 100644 --- a/examples/api-routes/data.js +++ b/examples/api-routes/data.js @@ -61,7 +61,7 @@ export const people = [ }, { id: '7', - name: 'Beru Whitesun lars', + name: 'Beru Whitesun Lars', height: '165', mass: '75', hair_color: 'brown', diff --git a/examples/api-routes/package.json b/examples/api-routes/package.json index f6156d9d3fa1a..56e1c8107ad3f 100644 --- a/examples/api-routes/package.json +++ b/examples/api-routes/package.json @@ -1,6 +1,5 @@ { - "name": "api-routes", - "version": "1.0.0", + "private": true, "scripts": { "dev": "next", "build": "next build", @@ -8,9 +7,8 @@ }, "dependencies": { "next": "latest", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "swr": "0.1.18" - }, - "license": "MIT" + "react": "^17.0.2", + "react-dom": "^17.0.2", + "swr": "^1.0.1" + } } diff --git a/examples/auth-with-stytch/.env.template b/examples/auth-with-stytch/.env.template new file mode 100644 index 0000000000000..4aed8e797e320 --- /dev/null +++ b/examples/auth-with-stytch/.env.template @@ -0,0 +1,8 @@ +# The two iron-session values may be left as-is while testing out this example app. +IRON_SESSION_COOKIE_NAME="stytch_next_example_cookie" +IRON_SESSION_PASSWORD="complex_password_at_least_32_characters_long" +# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys +STYTCH_PROJECT_ENV=test +STYTCH_PROJECT_ID="YOUR_STYTCH_PROJECT_ID" +STYTCH_SECRET="YOUR_STYTCH_SECRET" +NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN" diff --git a/examples/with-ant-design-mobile/.gitignore b/examples/auth-with-stytch/.gitignore similarity index 100% rename from examples/with-ant-design-mobile/.gitignore rename to examples/auth-with-stytch/.gitignore diff --git a/examples/auth-with-stytch/README.md b/examples/auth-with-stytch/README.md new file mode 100644 index 0000000000000..7d787948b5236 --- /dev/null +++ b/examples/auth-with-stytch/README.md @@ -0,0 +1,68 @@ +# Stytch + Next.js example app on Vercel + +This is a [Stytch](https://stytch.com) + [Next.js](https://nextjs.org/) project that showcases how to enable elegant authentication in your applicaiton. + +
Hello Vercel!
++ This example app demonstrates how you can integrate with Stytch using + Next.js and deploy on Vercel. Now, let’s get started! +
+ + +
+
+ )
+}
+
+export default SendOTPForm
diff --git a/examples/auth-with-stytch/components/StytchContainer.tsx b/examples/auth-with-stytch/components/StytchContainer.tsx
new file mode 100644
index 0000000000000..e0972d98f99a2
--- /dev/null
+++ b/examples/auth-with-stytch/components/StytchContainer.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from '../styles/Home.module.css'
+import Image from 'next/image'
+import lockup from '/public/powered-by-stytch.svg'
+
+type Props = {
+ children: React.ReactElement | React.ReactElement[]
+}
+
+const StytchContainer = (props: Props) => {
+ const { children } = props
+ return (
+ Enter phone number
++ Enter your phone number to receive a passcode for authentication. +
+ +
+
+ )
+}
+
+export default StytchContainer
diff --git a/examples/auth-with-stytch/components/VerifyOTPForm.tsx b/examples/auth-with-stytch/components/VerifyOTPForm.tsx
new file mode 100644
index 0000000000000..cf62eb5e73a88
--- /dev/null
+++ b/examples/auth-with-stytch/components/VerifyOTPForm.tsx
@@ -0,0 +1,168 @@
+import React from 'react'
+import styles from '../styles/Home.module.css'
+import { sendOTP } from '../lib/otpUtils'
+import { useRouter } from 'next/router'
+
+// Handles auto-tabbing to next passcode digit input.
+// Logic inspired from https://stackoverflow.com/questions/15595652/focus-next-input-once-reaching-maxlength-value.
+const autoTab = (target: HTMLInputElement, key?: string) => {
+ if (target.value.length >= target.maxLength) {
+ let next = target
+ while ((next = next.nextElementSibling as HTMLInputElement)) {
+ if (next == null) break
+ if (next.tagName.toLowerCase() === 'input') {
+ next?.focus()
+ break
+ }
+ }
+ }
+ // Move to previous field if empty (user pressed backspace)
+ else if (target.value.length === 0) {
+ let previous = target
+ while ((previous = previous.previousElementSibling as HTMLInputElement)) {
+ if (previous == null) break
+ if (previous.tagName.toLowerCase() === 'input') {
+ previous.focus()
+ break
+ }
+ }
+ }
+}
+
+type Props = {
+ methodId: string
+ phoneNumber: string
+}
+
+const VerifyOTPForm = (props: Props) => {
+ const { methodId, phoneNumber } = props
+ const [isDisabled, setIsDisabled] = React.useState(true)
+ const [currentMethodId, setCurrentMethodId] = React.useState(methodId)
+ const [isError, setIsError] = React.useState(false)
+ const router = useRouter()
+
+ const strippedNumber = phoneNumber.replace(/\D/g, '')
+ const parsedPhoneNumber = `(${strippedNumber.slice(
+ 0,
+ 3
+ )}) ${strippedNumber.slice(3, 6)}-${strippedNumber.slice(6, 10)}`
+
+ const isValidPasscode = () => {
+ const regex = /^[0-9]$/g
+ const inputs = document.getElementsByClassName(styles.passcodeInput)
+ for (let i = 0; i < inputs.length; i++) {
+ if (!(inputs[i] as HTMLInputElement).value.match(regex)) {
+ return false
+ }
+ }
+ return true
+ }
+
+ const onPasscodeDigitChange = () => {
+ if (isValidPasscode()) {
+ setIsDisabled(false)
+ setIsError(false)
+ } else {
+ setIsDisabled(true)
+ }
+ }
+
+ const resetPasscode = () => {
+ const inputs = document.getElementsByClassName(styles.passcodeInput)
+ for (let i = 0; i < inputs.length; i++) {
+ ;(inputs[i] as HTMLInputElement).value = ''
+ }
+ document.getElementById('digit-0')?.focus()
+ setIsDisabled(true)
+ }
+
+ const resendCode = async () => {
+ const methodId = await sendOTP(phoneNumber)
+ setCurrentMethodId(methodId)
+ resetPasscode()
+ setIsError(false)
+ }
+
+ const onSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (isValidPasscode()) {
+ let otpInput = ''
+ const inputs = document.getElementsByClassName(styles.passcodeInput)
+ for (let i = 0; i < inputs.length; i++) {
+ otpInput += (inputs[i] as HTMLInputElement).value
+ }
+
+ const resp = await fetch('/api/authenticate_otp', {
+ method: 'POST',
+ body: JSON.stringify({ otpInput, methodId: currentMethodId }),
+ })
+
+ if (resp.status === 200) {
+ router.push('/profile')
+ } else {
+ setIsError(true)
+ resetPasscode()
+ }
+ }
+ }
+
+ const renderPasscodeInputs = () => {
+ const inputs = []
+ for (let i = 0; i < 6; i += 1) {
+ inputs.push(
+ autoTab(e.target as HTMLInputElement, e.key)}
+ placeholder="0"
+ size={1}
+ type="text"
+ />
+ )
+ }
+ return inputs
+ }
+
+ return (
+ {children}
+
+
+ )
+}
+
+export default VerifyOTPForm
diff --git a/examples/auth-with-stytch/lib/loadStytch.ts b/examples/auth-with-stytch/lib/loadStytch.ts
new file mode 100644
index 0000000000000..2b3330527516e
--- /dev/null
+++ b/examples/auth-with-stytch/lib/loadStytch.ts
@@ -0,0 +1,19 @@
+import * as stytch from 'stytch'
+
+let client: stytch.Client
+const loadStytch = () => {
+ if (!client) {
+ client = new stytch.Client({
+ project_id: process.env.STYTCH_PROJECT_ID || '',
+ secret: process.env.STYTCH_SECRET || '',
+ env:
+ process.env.STYTCH_PROJECT_ENV === 'live'
+ ? stytch.envs.live
+ : stytch.envs.test,
+ })
+ }
+
+ return client
+}
+
+export default loadStytch
diff --git a/examples/auth-with-stytch/lib/otpUtils.ts b/examples/auth-with-stytch/lib/otpUtils.ts
new file mode 100644
index 0000000000000..69a2bd10b91c2
--- /dev/null
+++ b/examples/auth-with-stytch/lib/otpUtils.ts
@@ -0,0 +1,11 @@
+export async function sendOTP(phoneNumber: string) {
+ const resp = await fetch('/api/send_otp', {
+ method: 'POST',
+ body: JSON.stringify({
+ intlCode: '+1',
+ phoneNumber,
+ }),
+ })
+ const data = await resp.json()
+ return data.methodId
+}
diff --git a/examples/auth-with-stytch/lib/types.ts b/examples/auth-with-stytch/lib/types.ts
new file mode 100644
index 0000000000000..d548d4c75fc21
--- /dev/null
+++ b/examples/auth-with-stytch/lib/types.ts
@@ -0,0 +1,4 @@
+export enum LoginMethod {
+ API,
+ SDK,
+}
diff --git a/examples/auth-with-stytch/lib/withSession.tsx b/examples/auth-with-stytch/lib/withSession.tsx
new file mode 100644
index 0000000000000..e00dba1ec30d0
--- /dev/null
+++ b/examples/auth-with-stytch/lib/withSession.tsx
@@ -0,0 +1,28 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { Session, withIronSession } from 'next-iron-session'
+
+type NextIronRequest = NextApiRequest & { session: Session }
+
+type APIHandler = (
+ req: NextIronRequest,
+ res: NextApiResponseEnter passcode
++ A 6-digit passcode was sent to you at{' '} + {parsedPhoneNumber}. +
+ +
+
+
+
+ ),
+ }
+
+ return (
+
+ {loginMethod === null ? (
+
+ )
+}
+
+const getServerSidePropsHandler: ServerSideProps = async ({ req }) => {
+ // Get the user's session based on the request
+ const user = req.session.get('user') ?? null
+ const props: Props = {
+ publicToken: stytchProps.publicToken,
+ user,
+ }
+ return { props }
+}
+
+export const getServerSideProps = withSession(getServerSidePropsHandler)
+
+export default App
diff --git a/examples/auth-with-stytch/pages/profile.tsx b/examples/auth-with-stytch/pages/profile.tsx
new file mode 100644
index 0000000000000..33896e29da932
--- /dev/null
+++ b/examples/auth-with-stytch/pages/profile.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react'
+import styles from '../styles/Home.module.css'
+import StytchContainer from '../components/StytchContainer'
+import withSession, { ServerSideProps } from '../lib/withSession'
+import { useRouter } from 'next/router'
+
+type Props = {
+ user?: {
+ id: string
+ }
+}
+
+const Profile = (props: Props) => {
+ const { user } = props
+ const router = useRouter()
+
+ useEffect(() => {
+ if (!user) {
+ router.replace('/')
+ }
+ })
+
+ const signOut = async () => {
+ const resp = await fetch('/api/logout', { method: 'POST' })
+ if (resp.status === 200) {
+ router.push('/')
+ }
+ }
+
+ return (
+ <>
+ {!user ? (
+
+ ) : (
+ {'Welcome!'}
++ Thank you for using Stytch! Here’s your user info. +
+
+ {JSON.stringify(user, null, 1).replace(' ', '')}
+
+
+