随着互联网的发展，越来越多的人开始使用网络观看电影，同时也有越来越多的人开始关注电影点评。因此，建立一个电影点评网站，对于电影爱好者来说是非常有意义的。本文将介绍如何使用 SSR+React+Next.js 来轻松搭建一个电影点评网站。
前置知识
在开始之前，需要掌握以下技术：
- React：一种用于构建用户界面的 JavaScript 库。
- Node.js：一种基于 Chrome V8 引擎的 JavaScript 运行环境。
- Express.js：一种 Web 应用程序框架，可用于创建服务器端应用程序。
- Next.js：一个基于 React 的服务端渲染框架。
如果你还不熟悉这些技术，可以先学习它们的基础知识。
搭建环境
在开始之前，需要安装 Node.js。可以到官网下载安装包进行安装。安装完成后，打开命令行工具，输入以下命令检查是否安装成功：
node -v
如果输出了版本号，则表示安装成功。
接下来，使用以下命令创建一个新的 Next.js 项目：
npx create-next-app my-movie-app
该命令会创建一个名为 my-movie-app 的新项目。进入该项目目录，并安装一些依赖项：
cd my-movie-app npm install --save react react-dom next express
创建页面
在 Next.js 中，可以通过在 pages 目录下创建文件来创建页面。例如，可以在 pages 目录下创建一个名为 index.js 的文件，该文件将作为网站的首页。在该文件中，可以使用 React 来构建页面。例如，可以创建一个简单的电影列表页面：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -
- --- -- ------ ---- --------- ----------- --
- --- -- ------ ---- ---------- --
- --- -- ------ ---- ---- ------- --
--
-------- ------- -
------ -
-----
------ ----- --------
----
----------------- -- -
--- ---------------------------------
---
-----
------
--
-
------ ------- ------在该页面中，使用了一个名为 movies 的数组来存储电影列表。然后，使用 map 方法将每个电影渲染为一个列表项。
添加服务端渲染
在默认情况下，Next.js 使用客户端渲染来显示页面。这意味着，当用户访问网站时，网站将向服务器请求 HTML、CSS 和 JavaScript 文件，并将它们下载到用户的浏览器中。然后，浏览器将使用 JavaScript 来渲染页面。
但是，客户端渲染有一些缺点。例如，当用户访问网站时，页面需要等待 JavaScript 文件的下载和执行，这会导致页面加载时间过长。同时，搜索引擎无法正确地解析 JavaScript，这会影响网站的 SEO。
因此，使用服务端渲染可以解决这些问题。在服务端渲染中，服务器将使用 React 来生成 HTML、CSS 和 JavaScript，然后将它们发送给用户的浏览器。这意味着，当用户访问网站时，页面将立即显示，而无需等待 JavaScript 文件的下载和执行。
要在 Next.js 中实现服务端渲染，只需在页面组件中添加一个名为 getInitialProps 的静态方法。该方法将在服务器端运行，并返回一个对象，该对象将作为页面组件的 props 属性。例如，可以修改前面的页面组件，使其支持服务端渲染：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -
- --- -- ------ ---- --------- ----------- --
- --- -- ------ ---- ---------- --
- --- -- ------ ---- ---- ------- --
--
-------- ------- ------ -- -
------ -
-----
------ ----- --------
----
----------------- -- -
--- ---------------------------------
---
-----
------
--
-
--------------------- - ----- -- -- -
------ - ------ --
--
------ ------- ------在该页面组件中，添加了一个名为 movies 的 props 属性。该属性的值将在 getInitialProps 方法中返回。在该方法中，可以通过任何方式获取数据，例如从数据库中获取数据、从 API 中获取数据等等。
添加路由
在默认情况下，Next.js 将根据页面文件的名称来创建路由。例如，pages/index.js 将作为网站的首页。但是，可以使用 next/router 包来创建自定义路由。
例如，可以创建一个名为 Movie 的页面组件，用于显示单个电影的详细信息。然后，可以使用 next/router 包来创建一个名为 /movie/:id 的路由，该路由将匹配任何以 /movie/ 开头的 URL，并将电影的 ID 作为参数传递给 Movie 组件。例如，可以创建以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------------
-------- ------- -
----- ------ - ------------
----- - -- - - -------------
------ -
-----
--------- ---------
------
--
-
------ ------- ------在该页面组件中，使用 useRouter 钩子获取路由信息，并从路由参数中获取电影 ID。然后，可以使用该 ID 来获取电影的详细信息，并在页面中显示。
添加样式
在 Next.js 中，可以使用 CSS 或 SCSS 来为页面添加样式。可以创建一个名为 styles.scss 的文件，并将其导入到页面组件中。例如，可以在 styles.scss 文件中添加以下样式：
$primary-color: #0070f3;
h1 {
color: $primary-color;
}然后，可以在页面组件中导入该文件，并将其应用于页面元素。例如，可以在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -----------------
----- ------ - -
- --- -- ------ ---- --------- ----------- --
- --- -- ------ ---- ---------- --
- --- -- ------ ---- ---- ------- --
--
-------- ------- ------ -- -
------ -
-----
------ ----- --------
----
----------------- -- -
--- ---------------------------------
---
-----
------
--
-
--------------------- - ----- -- -- -
------ - ------ --
--
------ ------- ------在该页面组件中，导入了 styles.scss 文件，并将其应用于 h1 元素。
部署网站
在完成网站的开发后，可以将其部署到互联网上。可以使用各种云服务提供商（例如 AWS、Azure、Google Cloud 等）来部署网站。这里介绍一种使用 Vercel 来部署网站的方法。
Vercel 是一个基于云的服务，可用于部署静态和动态网站。可以使用 Vercel CLI 来部署 Next.js 应用程序。首先，需要安装 Vercel CLI：
npm install -g vercel
然后，使用以下命令登录到 Vercel：
vercel login
接下来，使用以下命令将网站部署到 Vercel：
vercel
该命令将提示输入一些信息，例如网站的名称、环境变量等等。完成后，网站将被部署到 Vercel，并可以通过分配的 URL 进行访问。
总结
在本文中，介绍了如何使用 SSR+React+Next.js 来轻松搭建一个电影点评网站。通过使用服务端渲染、自定义路由和样式，可以创建一个灵活且具有吸引力的网站。同时，通过使用 Vercel，可以轻松部署网站到互联网上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660ba40dd10417a222bcda9b