Next.js高级特性：export导入

Next.js支持JavaScript的ES2020动态import()。有了它，您可以动态导入JavaScript模块并使用它们。他们还与SSR合作。

在以下示例中，我们使用来实现模糊搜索，fuse.js并且仅在用户键入搜索输入后才在浏览器中动态加载模块：

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

您可以将动态导入视为将代码拆分为可管理块的另一种方法。

也可以使用动态导入来导入React组件，但是在这种情况下，我们将其与一起使用next/dynamic以确保其工作原理与其他任何React组件一样。请查看以下各节，以获取有关其工作原理的更多详细信息。

基本用法

在以下示例中，该模块../components/hello将由页面动态加载：

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

DynamicComponent将是所返回的默认组件../components/hello。它像常规的React Component一样工作，您可以像往常一样将props传递给它。

注意：import()需要显式编写而无需模板字符串。此外，Next.js调用import()必须包含在dynamic()其中，以便能够将webpack包/模块ID与特定dynamic()调用进行匹配，并在呈现之前预加载它们。dynamic()不能在React渲染中使用，因为它需要在模块的顶层标记，才能进行预加载才能工作，类似于React.lazy。

export命名

如果动态组件不是默认导出，则也可以使用命名的导出。考虑../components/hello.js具有命名export的模块Hello：

export function Hello() {
  return <p>Hello!</p>
}

要动态导入Hello组件，您可以从返回的Promise中将其返回import()，如下所示：

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

带有自定义加载组件

loading可以添加一个可选组件，以在加载动态组件时呈现加载状态。例如：

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

没有SSR

您可能并不总是希望在服务器端包括一个模块。例如，当模块包含仅在浏览器中可用的库时。

看下面的例子：