Next.js: Import Global Stylesheets / Script Files: Library

Next.js: Import Global Stylesheets / Script Files

20th August 2020 at 2:19pm

Next.js 提供了两种机制让你加入全局的 CSS (或 SASS) 或者 JS 文件。

第一种是使用 pages/_app.js，描述在这里。它仅能导入 CSS / SASS，无法导入 JS 文件。我不太喜欢这种方案。但是 Next.js 强制要求全局 CSS / SASS 只能通过这种方式加入。

第二种是使用 next/head。不可用于导入 CSS，可导入 JS。可以写一个被每个页面所使用的公共 Meta 组件，然后在各页面使用它：

在 pages/base/Meta.tsx 中写入：

import React from "react";

import Head from 'next/head'

const Meta = () => (
  <Head>
    <script src="/js/font-awesome/all.min.js"></script>
  </Head>
)

export default Meta

这样会导入 Font-Awesome 的 JS 文件。

在各页面使用它，比如：

import React from "react";
import Meta from "pages/base/Meta";

class IndexPage extends React.Component<any, any> {
  render() {
    return <div>
      <Meta/>
      {# ... #}
    </div>
  }
}

export default IndexPage

Next.js: Import Global Stylesheets / Script Files

See Also