React 是一个非常流行的前端框架，它可以用来构建大型、可扩展的应用程序。而 Next.js 是一个基于 React 的服务器端渲染框架，它可以提供更好的性能和 SEO 优化。在本文中，我们将介绍如何从零开始学习 React 和 Next.js，并创建一个最基础的服务器端渲染应用程序。
准备工作
在开始学习之前，你需要确保你已经安装了 Node.js，并且有一个可以编写代码的编辑器。安装 Node.js 可以访问官网 Node.js 并下载适合你系统的版本，编辑器则可以选择 VS Code、Sublime Text 或 WebStorm 等。
创建一个基础的 Next.js 应用
首先，我们需要在命令行界面中创建一个 Next.js 应用程序。这可以通过运行以下命令来完成：
npx create-next-app my-app
这将创建一个名为 my-app 的新文件夹，并在其中初始化一个新的 Next.js 应用程序。完成后，进入新文件夹并启动应用程序：
cd my-app npm run dev
现在，你应该能够在浏览器中访问 http://localhost:3000，并看到一个由 Next.js 生成的欢迎页面。
创建一个简单的 React 组件
接下来，我们将创建一个简单的 React 组件，并在我们的应用程序中使用它。在新文件夹中创建一个新的文件夹 components，并在其中创建一个新的文件 HelloWorld.js。在 HelloWorld.js 中，我们将创建一个简单的 React 组件：
import React from 'react';
const HelloWorld = () => {
return <h1>Hello World!</h1>;
};
export default HelloWorld;现在，我们可以在我们的应用程序中使用 HelloWorld 组件。打开 pages/index.js 并将其替换为以下内容：
import HelloWorld from '../components/HelloWorld';
const Home = () => {
return <HelloWorld />;
};
export default Home;我们在 pages/index.js 中导入了 HelloWorld 组件，并将其渲染到 Home 页面上。现在，我们可以重新加载页面，并在浏览器中看到 Hello World! 的文本。
服务器端渲染
服务器端渲染（SSR）可以提高网站的性能和搜索引擎优化。在 Next.js 中，我们可以很容易地启用服务器端渲染。在这个示例中，我们将演示如何使用服务器端渲染来动态渲染页面内容。
首先，我们需要创建一个简单的 API，它将返回一些数据供我们在页面上渲染。在新文件夹中创建一个新的文件夹 pages/api，并在其中创建一个新的文件 hello-world.js。在 hello-world.js 中，我们将创建一个简单的 API：
export default (req, res) => {
res.statusCode = 200;
res.json({ message: 'Hello World!' });
};现在，我们可以重新加载应用程序，并在浏览器中访问 http://localhost:3000/api/hello-world。我们应该能够看到一个 JSON 响应，其中包含了我们的消息。
接下来，我们将使用 getInitialProps 函数来从我们的 API 中动态获取数据并在服务器端渲染页面。打开 pages/index.js 并修改它如下：
-- -------------------- ---- ------- ------ ---------- ---- --------------------------- ----- ---- - -- ------- -- -- - ------ ----------- ----------------- --- -- -------------------- - ----- -- -- - ----- --- - ----- ----------------------------------------------- ----- - ------- - - ----- ----------- ------ - ------- -- -- ------ ------- -----
在这个示例中，我们使用 fetch 函数从我们的 API 中获取数据，然后将数据作为 props 传递给 HelloWorld 组件。
现在，重新启动我们的应用程序并重新加载页面，我们应该能够在浏览器中看到 Hello World! 的文本。如果我们查看页面源代码，我们可以看到 HTML 中已经包含了我们的内容，并且在不依赖 JavaScript 的情况下可以正常工作。
结论
在本文中，我们介绍了如何从零开始学习 React 和 Next.js，并创建了一个最基本的服务器端渲染应用程序。我们创建了一个简单的 React 组件，并使用服务器端渲染从我们的 API 中动态获取数据。这只是 Next.js 和 React 的一个基础，还有更多内容等待你去探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f26f40a44b36ee5765ecd2