+
+
+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 000000000000..c8fc45069a28
--- /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 000000000000..3e3901a682dd
--- /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 (
+
+
+
+
+
+
+
diff --git a/errors/page-data-collection-timeout.md b/errors/page-data-collection-timeout.md
index 12332bfb430b..49d2d80fa9f6 100644
--- a/errors/page-data-collection-timeout.md
+++ b/errors/page-data-collection-timeout.md
@@ -11,8 +11,8 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful
- 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 `experimental.pageDataCollectionTimeout` configuration option (default `60` in seconds).
+- Increase the timeout by changing the `config.staticPageGenerationTimeout` configuration option (default `60` in seconds).
### Useful Links
-- [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation)
+- [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md)
diff --git a/errors/placeholder-blur-data-url.md b/errors/placeholder-blur-data-url.md
index 2fc53099c983..9c9a76819dd7 100644
--- a/errors/placeholder-blur-data-url.md
+++ b/errors/placeholder-blur-data-url.md
@@ -6,7 +6,7 @@ You are attempting use the `next/image` component with `placeholder=blur` proper
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, and webp are supported at this time.
+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
diff --git a/errors/prerender-error.md b/errors/prerender-error.md
index 87e301c459db..474926c9631b 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 f39ce7786fc7..84ac204fa85c 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 000000000000..38ea8e05540b
--- /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
+
+ )
+}
+
+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 000000000000..1c5e2fe229a8
--- /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 000000000000..b2276b076084
--- /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 000000000000..4f11a03dc6cc
--- /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 000000000000..83d9080a67d7
--- /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 000000000000..2ccfa04b11d9
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 000000000000..63ccbc321282
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 000000000000..09b0974a4185
--- /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 000000000000..08eb2fada9e0
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 000000000000..e07703278733
--- /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 000000000000..bb5a15a24c33
--- /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 000000000000..d30afe1a2503
--- /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 000000000000..c2b16ddb2f93
--- /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 000000000000..b8d597880a1a
--- /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/pages/advanced/ssr-profile.js b/examples/auth0/pages/advanced/ssr-profile.js
index 84d96d4dbee4..bbe88c59c751 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 e06f9657d0d5..a1f9318dee34 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/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
index b74a6e5ad721..15856d06a494 100644
--- a/examples/blog-starter-typescript/README.md
+++ b/examples/blog-starter-typescript/README.md
@@ -36,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 f804ff619286..067672f38082 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 6497d4c1bb85..78def8002412 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 e8a7fdce4cd0..d2bcba33363b 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/rewrite-auto-export-fallback.md b/errors/rewrite-auto-export-fallback.md index a16fa7125639..af712a447757 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 index 02face5fc054..96903efad9ca 100644 --- a/errors/sharp-missing-in-production.md +++ b/errors/sharp-missing-in-production.md @@ -16,3 +16,4 @@ You are seeing this error because Image Optimization in production mode (`next s ### 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 000000000000..dcd90aea3662 --- /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-page-generation-timeout.md b/errors/static-page-generation-timeout.md index 6cef054dc5dd..c8cc05e24f34 100644 --- a/errors/static-page-generation-timeout.md +++ b/errors/static-page-generation-timeout.md @@ -11,9 +11,9 @@ When restarted it will retry all uncompleted jobs, but if a job was unsuccessful - 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 `experimental.staticPageGenerationTimeout` configuration option (default `60` in seconds). +- Increase the timeout by changing the `staticPageGenerationTimeout` configuration option (default `60` in seconds). ### Useful Links -- [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) -- [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) +- [`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 000000000000..701f260c785b --- /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 000000000000..712affcf27a7 --- /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.md b/errors/template.md deleted file mode 100644 index 711da0c52abf..000000000000 --- a/errors/template.md +++ /dev/null @@ -1,13 +0,0 @@ -# - -#### Why This Error Occurred - - - -#### Possible Ways to Fix It - - - -### Useful Links - - diff --git a/errors/template.txt b/errors/template.txt new file mode 100644 index 000000000000..3aa3e131acac --- /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 0d4129ef4f11..4804488cafc4 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/webpack5.md b/errors/webpack5.md index b8c994c549e3..a7f0d6f72bcd 100644 --- a/errors/webpack5.md +++ b/errors/webpack5.md @@ -2,7 +2,9 @@ #### Why This Message Occurred -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. 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 = { @@ -26,9 +28,8 @@ In the past releases we have gradually rolled out webpack 5 to Next.js applicati - 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 can still opt-out and use webpack 4 to help with backwards compatibility using `webpack5: false` in `next.config.js` - -In the next major version webpack 4 support will be removed. +- 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 @@ -36,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/analyze-bundles/README.md b/examples/analyze-bundles/README.md index 8aec1e56c79c..02e1673ccd3b 100644 --- a/examples/analyze-bundles/README.md +++ b/examples/analyze-bundles/README.md @@ -1,6 +1,6 @@ # 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 diff --git a/examples/api-routes-apollo-server/README.md b/examples/api-routes-apollo-server/README.md index 9b4209908adb..5d1066048ddc 100644 --- a/examples/api-routes-apollo-server/README.md +++ b/examples/api-routes-apollo-server/README.md @@ -1,6 +1,6 @@ # 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 diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md index 1c51cf4d7e38..fe53eb534cb4 100644 --- a/examples/api-routes-graphql/README.md +++ b/examples/api-routes-graphql/README.md @@ -1,6 +1,6 @@ # 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 diff --git a/examples/api-routes-rate-limit/package.json b/examples/api-routes-rate-limit/package.json index 568cc38e0b84..61b3034ed641 100644 --- a/examples/api-routes-rate-limit/package.json +++ b/examples/api-routes-rate-limit/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "lru-cache": "^6.0.0", - "next": "10.0.3", + "next": "latest", "react": "^17.0.2", "react-dom": "^17.0.2", "uuid": "^8.3.1" diff --git a/examples/api-routes/data.js b/examples/api-routes/data.js index ce2acde5041c..f57a9d0786fd 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 633936bee19f..56e1c8107ad3 100644 --- a/examples/api-routes/package.json +++ b/examples/api-routes/package.json @@ -9,6 +9,6 @@ "next": "latest", "react": "^17.0.2", "react-dom": "^17.0.2", - "swr": "0.1.18" + "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 000000000000..4aed8e797e32 --- /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-prisma/.gitignore b/examples/auth-with-stytch/.gitignore similarity index 100% rename from examples/with-prisma/.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 000000000000..7d787948b523 --- /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 000000000000..e0972d98f99a
--- /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 000000000000..cf62eb5e73a8
--- /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 000000000000..2b3330527516
--- /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 000000000000..69a2bd10b91c
--- /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 000000000000..d548d4c75fc2
--- /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 000000000000..e00dba1ec30d
--- /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 000000000000..33896e29da93
--- /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(' ', '')}
+
+
+