如果您使用 Next.js 构建了一个 Web 应用程序，但现在需要将其转换为纯 React.js 应用程序，那么您并不孤单。无论是出于简单性、特定项目要求还是对客户端渲染的偏好，只要有正确的指导，从 Next.js 转换到 React 都可以很简单。在本文中，我将引导您完成 将 Next.js 应用程序转换为 React.js 的步骤，确保平稳过渡，同时保持应用程序的核心功能。

注意： 如果您希望将 React.js 应用程序转换为 Next.js，请查看我的另一篇关于如何将 React.js 转换为 Next.js 的文章。

为什么将 Next.js 转换为 React.js？

Next.js 是一个出色的框架，它提供服务器端渲染 (SSR)、静态站点生成 (SSG) 以及许多其他开箱即用的功能。但是，这些功能对于较小的项目来说可能有点过分，或者如果您更喜欢使用 React.js 进行客户端渲染 (CSR)，则这些功能可能是不必要的。转换为 React.js 可以简化您的构建过程，减少服务器依赖性，并让您更好地控制应用程序的架构。

了解差异

在深入了解转换过程之前，有必要了解 Next.js 和 React.js 之间的主要区别：

• 服务器端渲染与客户端渲染： Next.js 支持 SSR 和 SSG，而 React.js 主要用于 CSR。
• 路由： Next.js 有一个内置的基于文件的路由系统。在 React.js 中，您需要使用像 React Router 这样的库。
• API 路由： Next.js 允许您在同一项目中创建 API 路由。在 React.js 中，您通常会分离前端和后端。

将 Next.js 转换为 React.js 的步骤

让我们开始了解如何将 Next.js 应用程序转换为 React.js 的分步指南。

1. 设置一个新的 React.js 应用程序

首先，使用 Create React App (CRA) 或 Vite 等工具创建一个新的 React.js 项目。

使用 Create React App：

npx create-react-app my-react-app
cd my-react-app

使用Vite：

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. 转移依赖

将依赖项和 devDependency 从 Next.js 项目的 package.json 复制到新的 React.js 项目的 package.json。运行npm install或yarn install来安装它们。

3. 迁移组件和页面

将 Next.js 组件和页面目录的内容复制到 React.js 项目的 src 目录中。由于 Next.js 使用页面目录进行路由，因此您需要调整此结构。

4. 使用React Router实现路由

Next.js 根据页面目录自动处理路由。在 React.js 中，您需要手动设置路由。

安装 React Router:

npm install react-router-dom

在 src/App.js 中设置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    
      
        } />
        } />
        {/* Add other routes */}
      
    
  )
}

export default App

5. 调整数据获取方式

在 Next.js 中，数据获取是使用 getServerSideProps、getStaticProps 或 getInitialProps 完成的。在 React.js 中，您需要在组件内处理数据获取，通常使用 useEffect 和 useState。

例子：

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

6. 处理API路由

如果您的 Next.js 应用使用pages/api目录中的API路由，您需要将它们迁移到单独的后端服务或调整您的前端以从外部API获取。

选项：

• 创建单独的后端：使用 Node.js、Express 或任何后端框架来设置 API 端点。
• 使用外部 API：如果可能，调整您的前端以直接使用外部 API。

7. 更新环境变量

Next.js 使用以 NEXT_PUBLIC_ 为前缀的环境变量作为客户端变量。在 React.js 中，在项目的根目录下创建一个 .env 文件，并使用 REACT_APP_ 作为变量前缀。

例子：

REACT_APP_API_URL=https://api.example.com

使用 process.env.REACT_APP_API_URL 在代码中访问它们。

8. 删除 Next.js 特定配置

删除任何 Next.js 特定配置，例如 next.config.js。另外，删除不再需要的任何特定于 Next.js 的导入或包。

9. 测试您的应用程序

运行您的 React.js 应用程序以确保一切按预期工作。

npm start

检查每条路线和功能以验证转换是否成功。

结论

将 Next.js 应用程序转换为 React.js 涉及设置一个新的 React 项目并迁移组件、调整路由以及以不同方式处理数据获取。虽然 Next.js 提供了许多强大的功能，但纯 React.js 应用程序提供了简单性和灵活性，特别是对于不需要服务器端渲染的项目。

按照本指南了解如何将 Next.js 转换为 React.js，您应该可以实现无缝转换。

感谢您的阅读！如果您有兴趣反其道而行之，请查看我关于如何将 React.js 应用程序转换为 Next.js 的文章。有关新项目或文章的更多更新，请在 Twitter 上关注我：@jake_prins。