Dynamic imports through React.lazy have better support in React 18. Previously, Next.js supported dynamic imports internally without requiring Suspense or React.lazy. Now to embrace the official APIs on the React side, we provide you with options.suspense in next/dynamic.

import dynamic from 'next/dynamic'
import { lazy, Suspense } from 'react'

import Content from '../components/content'

// These two ways are identical:
const Profile = dynamic(() => import('./profile'), { suspense: true })
const Footer = lazy(() => import('./footer'))

export default function Home() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        {/* A component that uses Suspense */}
        <Content />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Profile />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Footer />
      </Suspense>
    </div>
  )
}
Dynamic imports through React.lazy have better support in React 18. Previously, Next.js supported dynamic imports internally without requiring Suspense or React.lazy. Now to embrace the official APIs on the React side, we provide you with options.suspense in next/dynamic.

import dynamic from 'next/dynamic'
import { lazy, Suspense } from 'react'

import Content from '../components/content'

// These two ways are identical:
const Profile = dynamic(() => import('./profile'), { suspense: true })
const Footer = lazy(() => import('./footer'))

export default function Home() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        {/* A component that uses Suspense */}
        <Content />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Profile />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Footer />
      </Suspense>
    </div>
  )
}
To enable streaming SSR, set the experimental option runtime to either 'nodejs' or 'edge':

// next.config.js
module.exports = {
  experimental: {
    runtime: 'nodejs',
  },
}
Option suspense allows you to lazy-load a component, similar to React.lazy and with React 18. Note that it only works on client-side or server-side with fallback. Full SSR support in concurrent mode is still a work-in-progress.

import dynamic from 'next/dynamic'

const DynamicLazyComponent = dynamic(() => import('../components/hello4'), {
  suspense: true,
})

function Home() {
  return (
    <div>
      <Suspense fallback={`loading`}>
        <DynamicLazyComponent />
      </Suspense>
    </div>
  )
}
In the following example, the module ../components/hello will be dynamically loaded by the page:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
To dynamically import the Hello component, you can return it from the Promise returned by import(), like so:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
An optional loading component can be added to render a loading state while the dynamic component is being loaded. For example:

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
First, update to the latest version of Next.js: npm install next@latest. Then, update your next.config.js file:

// next.config.js

module.exports = {
  compiler: {
    // ssr and displayName are configured by default
    styledComponents: true,
  },
}
If you have a custom _document, you have to change your _document to a functional component like below to use server components. If you don't have one, Next.js will use the default _document component for you.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
Then, update your next.config.js:

// next.config.js
module.exports = {
  experimental: {
    runtime: 'nodejs',
    serverComponents: true,
  },
}
Note that to handle switching only the locale while preserving all routing information such as dynamic route query values or hidden href query values, you can provide the href parameter as an object:

import { useRouter } from 'next/router'
const router = useRouter()
const { pathname, asPath, query } = router
// change just the locale and maintain all other route information including href's query
router.push({ pathname, query }, asPath, { locale: nextLocale })

Recommend

Nextjs Streaming SSR (Alpha) Enable Streaming SSR

Nextjs Adding AMP Components

Nextjs AMP in Static HTML export

Nextjs AMP Validation Skip AMP Validation

Nextjs AMP Validation Custom Validators

Nextjs Output File Tracing Caveats

Nextjs Output File Tracing Automatically Copying Traced Files (experimental)

Nextjs Using MDX with Next.js Using Components, Layouts and Custom Elements Custom Elements

Nextjs Using MDX with Next.js Using Components, Layouts and Custom Elements Layouts

Nextjs Using MDX with Next.js Using Components, Layouts and Custom Elements Frontmatter

Nextjs Using MDX with Next.js Using Components, Layouts and Custom Elements

Nextjs Using MDX with Next.js @next/mdx Setup @next/mdx in Next.js

Nextjs Next.js Compiler Experimental Features Minification

Nextjs Next.js Compiler Supported Features Legacy Decorators

Nextjs Next.js Compiler Supported Features Remove Console

Nextjs Next.js Compiler Supported Features Remove React Properties

Nextjs Next.js Compiler Supported Features Relay

Nextjs Next.js Compiler Supported Features Jest

Nextjs Next.js Compiler Supported Features Styled Components

Nextjs Debugging Debugging with Chrome DevTools Debugging on Windows

Nextjs Debugging Debugging with Chrome DevTools Server-side code

Nextjs Debugging Debugging with VS Code

Nextjs Customizing Babel Config

Nextjs Custom Server Disabling file-system routing

Nextjs Custom Server

Nextjs Custom Error Page 500 Page Reusing the built-in error page

Nextjs Custom Error Page 500 Page More Advanced Error Page Customizing

Nextjs Custom Error Page 500 Page Customizing The 500 Page

Nextjs Custom Error Page 404 Page Customizing The 404 Page

Nextjs Dynamic Import With suspense

Nextjs Dynamic Import With no SSR

Nextjs Dynamic Import With custom loading component

Nextjs Dynamic Import With named exports

Nextjs Dynamic Import Basic usage

Nextjs Dynamic Import

Nextjs Error Handling Handling Client Errors

Nextjs Internationalized Routing How does this work with Static Generation? Non-dynamic getStaticProps Pages

Nextjs Internationalized Routing How does this work with Static Generation? Dynamic Routes and getStaticProps Pages

Nextjs Internationalized Routing Transition between locales

Nextjs Internationalized Routing Automatic Locale Detection Disabling Automatic Locale Detection

Nextjs Internationalized Routing Automatic Locale Detection Prefixing the Default Locale

Nextjs Internationalized Routing Locale Strategies Domain Routing

Nextjs Internationalized Routing Locale Strategies Sub-path Routing

Nextjs Internationalized Routing Getting started

Nextjs Source Maps

Nextjs Measuring performance TypeScript

Nextjs Measuring performance Sending results to analytics

Nextjs Measuring performance Custom metrics

Nextjs Measuring performance Web Vitals

Nextjs Measuring performance Build Your Own

Nextjs Absolute Imports and Module path aliases

Nextjs Next.js Codemods Next.js 9 withamp-to-config

Nextjs Next.js Codemods Next.js 9 name-default-component Usage

Nextjs Next.js Codemods Next.js 10 add-missing-react-import

Nextjs Static HTML Export next export

Nextjs Custom App

Nextjs Customizing PostCSS Config Customizing Plugins

Nextjs Customizing PostCSS Config Customizing Target Browsers

Nextjs Customizing PostCSS Config Default Behavior

Nextjs Security Headers Options Content-Security-Policy

Nextjs Security Headers Options Referrer-Policy

Nextjs Security Headers Options X-Content-Type-Options

Nextjs Security Headers Options Permissions-Policy

Nextjs Security Headers Options X-Frame-Options

Nextjs Security Headers Options X-XSS-Protection

Nextjs Security Headers Options Strict-Transport-Security

Nextjs Security Headers Options X-DNS-Prefetch-Control

Nextjs Security Headers

Nextjs Custom Document TypeScript

Nextjs Custom Document Customizing renderPage