升级到 Next.js 8 的过程中遇到的坑及解决方法-JavaScript中文网-JavaScript教程资源分享门户

前言

Next.js 是一个流行的 React 服务端渲染框架，它可以使我们更容易地创建高性能的 web 应用程序。近期，Next.js 发布了 8 版本，为我们带来了许多新的功能和性能优化。但是，升级到 Next.js 8 可能会遇到一些坑，本文将详细介绍这些坑并提供解决方案。

升级前的准备

在升级到 Next.js 8 之前，我们需要先确保我们的应用程序使用的是最新的 Next.js 7 版本。然后，我们需要更新我们的依赖包，如下所示：

npm install next@latest

如果您正在使用 TypeScript，您还需要更新您的 TypeScript 版本：

npm install typescript@latest

接下来，我们需要在我们的 package.json 文件中更新我们的 scripts：

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

遇到的坑

babel-plugin-styled-components

在 Next.js 8 中，您可能会遇到一个问题：如果您使用了 babel-plugin-styled-components 并将其设为了 server 的插件，那么您可能会遇到类似以下错误的问题：

Error: Cannot find module './.cache/babel-loader/webpack-4/fafdc5224cc4d2b577cd825eaa13ebca.js'

解决此问题的方法是将 babel-plugin-styled-components 从 server 的插件中删除。为了避免在客户端和服务器端上使用不同的样式，您还需要在您的 babel 配置文件中同时指定 styled-components 的 plugin：

// www.javascriptcn.com code example
{
  "env": {
    "development": {
      "plugins": [
        "babel-plugin-styled-components"
      ]
    },
    "production": {
      "plugins": [
        "babel-plugin-styled-components"
      ]
    }
  }
}

TypeScript 插件

如果您使用 TypeScript，您可能会遇到一个 TypeError 的问题：

TypeError: Cannot read property 'isIncremental' of undefined

这是由于 TypeScript 3.3 的插件与 Next.js 8 不兼容所致。解决此问题的方法是更新 TypeScript 版本为 3.4 或更高版本。

npm install typescript@latest

Polyfill 配置

在 Next.js 8 中，polyfill 配置已更改。如果我们仍然使用旧的 polyfill 配置，则可能会遇到以下错误：

SyntaxError: Unexpected identifier 'Iterable'

解决此问题的方法是将 polyfill 配置从旧的 api 更改为新的配置方式。您可以在您的 next.config.js 中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  webpack: (config, { isServer }) => {
    // polyfill
    if (!isServer) {
      config.resolve.alias['@'] = path.resolve(__dirname);
      config.resolve.alias['react'] = 'preact/compat';
      config.resolve.alias['react-dom'] = 'preact/compat';
    }
    return config;
  },
};

接下来，我们需要安装需要的 polyfill：

npm install core-js@latest

styled-jsx-css

如果您使用了 styled-jsx-css，在升级到 Next.js 8 后，您可能会遇到一个问题：由于 styled-jsx-css 与 Next.js 8 不兼容，所以您必须更新 styled-jsx-css 的版本。

npm install styled-jsx-css@latest

默认 export

在 Next.js 8 中，默认的 export 改变了行为。以前，如果我们只导出了一个函数或类，它将被导出。现在，它将作为 default export。因此，如果您使用了这种语法：

export const myFunction = (/* ... */);

您需要将它更改为：

const myFunction = (/* ... */);
export default myFunction;

包含 JSX 的页面

在 Next.js 8 中，包含 JSX 的页面需要以 .tsx 结尾。如果您的文件扩展名是 .js，您需要将它更改为 .tsx。此外，您需要添加支持 .tsx 文件的 babel 预设：

npm install @babel/preset-typescript --save-dev

接下来，您需要将您的 .babelrc 文件更改为：

{
  "presets": [
    ["next/babel", { "preset-env": {}, "preset-typescript": {} }]
  ]
}

TypeScript 类型文件

如果您使用 TypeScript，并且在升级到 Next.js 8 后您的应用程序出现了类型错误，请确保您的模块导入了正确的类型文件。例如，如果您正在导入 React，您应该这样做：

import * as React from 'react';

而不是这样做：

import React from 'react';

结语

在本文中，我们详细介绍了升级到 Next.js 8 中可能遇到的一些坑，并提供了解决方案。如果您升级到 Next.js 8 时遇到了其他问题，请在下面的评论中告诉我们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfa25be46428fe9eb5586e

升级到 Next.js 8 的过程中遇到的坑及解决方法

前言