将create-react-app迁移到Next.js
在本文中，我将引导您完成将React应用程序（Create-React-App: CRA）迁移到Next.js所采取的步骤。
这非常简单，只需几个小时即可完成。Next.js是一个轻量级的React框架，因此它不像将橙子与苹果进行比较。虽然如此，这意味着有些事情有些不同。
循序渐进：将CRA转换为Next.js
创建一个新的Next.js项目
首先，在终端中运行此命令以创建新应用程序：
$ npx create-next-app将组件放入Next.js项目：
在新的Next.js项目中，您必须创建一个components文件夹。对所有可重复使用的组件使用该组件。
现在，您需要将代表实际页面的组件转换为页面。这就是pages文件夹的用途。页面中的每个文件代表您网站上的一个页面。接着，将页面组件放在此处。页面的命名约定全部为小写。因此，您的根页面应称为index.js。
路由：React vs Next.js
普通的React要么呈现为真正的单页应用程序（类似于网络上的电话应用程序），要么借助路由器组件呈现路由，而Next.js附带了内部路由机制。它将文件路径镜像到页面，甚至允许动态路由（如：ID）。
考虑到这一点，您需要创建反映路由器配置的目录结构。鉴于其受欢迎程度，您可能正在使用react-router，因此您可以在项目范围内搜索<Route>，然后逐个迁移它们。
随着页面设置的顺利进行，您现在需要将整个项目中的链接更改为本地链接。如前所述，Next.js附带了预先打包的路由解决方案，它们的语法略有不同。
首先，替换每次导入的React-Router链接：
import {Link} from "react-router-dom"与 Next.js 等效:
import Link from “next/link"现在，语法如下：
<Link to="/destination/path">Link Caption</Link>
becomes <Link href="/destination/path">Link Caption</Link>.本质上只是切换到href。
但是，如果您在链接上使用样式和CSS类，则必须多更改一些代码。
Next.js中的链接只是装饰器，并且仅接受一个prop：href。因此，您必须将样式和类直接放在锚标记上，并用Link装饰器将其包装起来，如下所示：
<Link href="/destination/path">
<a className="underline test-gray-600">Link Caption</a>
</Link>CSS
对于每个阅读此内容的人，本节中的步骤将有所不同。有无数种CSS编写方法。它可以是一个普通的CSS文件，SASS，样式化的组件，也可以使用数千种CSS框架之一。
Install @zeit/next-sass在项目的根目录创建一个文件next.config.js：
const withSass = require('@zeit/next-sass');
module.exports = withSass({
webpack (config, options) {
return config;
}
});Assets：React vs Next.js
在React中，您可以直接导入资源，例如图像，矢量和字体，而在Next.js中则不需要。 首先，您必须为该类型的资源添加一个webpack加载器到next.config.js中。
对于图片文件，我正在使用next-images。如果已经有一个文件，只需转到next.config.js文件，或者现在在项目的根目录中创建一个文件。如果只需要创建一个配置文件，那么只需要这两行代码：
const withImages = require('next-images');
module.exports = withImages();例如，如果您已经为选择的CSS框架提供了配置，则您可能想知道如何在此之上还使用next-images。只需将当前配置包装在其中即可。
例如，这是我的配置：
const withSass = require('@zeit/next-sass');
const withImages = require('next-images')
module.exports = withImages(withSass({
webpack (config, options) {
return config;
}
}));注入自定义脚本:
在页面目录下创建_document.js文件
导入文档:
export default class MyDocument extends Document {
render () {
return (
<html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}总结
从本质上讲，Next.js是一个React框架。如您在本文中所见，这使得将React应用程序迁移到Next变得非常容易。
希望您现在应该至少在本地拥有一个正在运行的Next.js应用程序。
腾讯云开发者
