如何将 Nextjs 应用程序转换为 Reactjs

php中文网 2024-10-15 12:02:18

如果您使用 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 (
    <router><routes><route path="/" element="{&lt;home"></route>} /&gt;
        <route path="/about" element="{&lt;about"></route>} /&gt;
        {/* add other routes */}
      </routes></router>
  )
}

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(() =&gt; {
    fetch('/api/data') // update the api endpoint as needed
      .then((response) =&gt; response.json())
      .then((data) =&gt; setdata(data))
  }, [])

  return <div>{/* render your data */}</div>
}

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。

以上就是如何将 Nextjs 应用程序转换为 Reactjs的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/11960.html