如何从 create react app 迁移到 Next.js ？

在本文中，我们将学习如何从 ReactJS 迁移到 NextJS。 Next.js 是由 Vercel 创建的开放式 React 框架，由 Google 和 Facebook 开发。宣传为零零系列，React 应用程序的单个命令。 Next.js 是一个优秀的框架，供 React 开发人员在服务器端构建专用站点。

React Thunderstorms 也帮助提升了 Next。该框架有助于提高 SEO、网站速度，同时提供代码共享和 API 路径，这就是我们决定从 React 迁移到 Next.js 的原因。

从 Create React 应用迁移到 Next.js 的方法：

• 使用 create-react-app 创建一个反应应用程序。
• 卸载依赖项（react-scripts）。
• 然后安装下一个应用依赖项。
• 更改脚本和 package.json。
• 使用 index.js 文件创建一个 pages 文件夹。

创建 NextJS 应用程序：

第 1 步：打开要在其中创建 React 应用程序的目录，然后打开命令行或 PowerShell 运行以下命令来创建反应应用程序。

npx create-react-app react-to-next
cd react-to next 
npm start 

第二步：卸载依赖。现在我们必须卸载 react-scripts 的依赖项。

npm uninstall react-scripts 

第 3 步：现在安装 Next 包或依赖项。运行以下命令进行下一步安装。

npm install next 

第 4 步：更改 package.json 的脚本。将以下脚本复制并粘贴到您的 package.json 文件中。

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

第 5 步：在您的根目录中创建一个 pages 文件夹。创建名为 pages 的文件夹后，在 pages 文件夹中创建一个名为 index.js 的 javascript 文件。

项目结构：它看起来像这样。

目录

示例：在相应文件中写下以下代码。

文件名：pages/index.js

index.js

import Image from "next/image";
import logo from "../src/logo.svg";

function App() {
    return (
        

            

                
                

                    Edit src/App.js and save to reload.
                

                
                    Learn React
                
            
        
    );
}

export default App;