术与器：Next.js 框架的基本应用
嗨，我是你稳定更新、持续输出的勾勾。
《道与法：React 服务端渲染的基本逻辑》让我们明白了其中的原理。本篇，让我们下凡进入术、器的应用层面感受一下。
其中 Vue 框架和 React 框架都有对应的比较成熟的 SSR 解决方案。React 对应的是 Next.js 框架，Vue 对应的就是 Nuxt.js。
当然，如果你对这些都不感兴趣，也可以自己实现一个 SSR 的服务端应用。我自己之前也写过一个，如果你感兴趣，想看看我实现的代码，可以留言给我，回头做成教程发出来。
我们以 React 对应的 Next.js 为例，来具体感受服务端渲染。先了解下 Next.js 的基本应用。
Next.js 框架
中文官网首页，已经介绍的非常清楚了：
https://www.nextjs.cn/
基本应用
安装部署
项目安装命令：npx create-next-app 或 npm init next-app my-next-project
运行：npm run dev 命令，启动项目。
同时，也可以查看 ./package.json 文件中的脚本配置。
"scripts": {"dev": "next dev","build": "next build","start": "next start"}
这些脚本涉及开发应用程序的不同阶段：
dev - 运行 next dev，以开发模式启动 Next.js
build - 运行 next build，以构建用于生产环境的应用程序
start- 运行 next start，将启动 Next.js 生产环境服务器
访问 http://localhost:3000 即可查看我们的应用程序了。
页面路由
在 Next.js 中，页面是被放置在 pages 文件夹中的 Reac 组件，这是框架定义好的。
组件需要被默认导出，组件文件中不需要引入 React，页面地址与文件地址是对应的关系。
页面（page） 根据其文件名与路由关联。例如，pages/about.js 被映射到 /about。
在你的项目中的 pages 目录创建一个 about.js。
为 ./pages/about.js 文件填充如下内容：
// 类组件需要引入 react 继承import React from 'react'class AboutPage extends React.Component {render(){return <h3>class Component -- About Pageh3>}}export default AboutPage
// 函数组件不需要引入 Reactfunction AboutPage(){return <h3>Function Component -- About Pageh3>}export default AboutPage
页面跳转
Link 组件默认使用 Javascript 进行页面跳转，即 SPA 形式的跳转。
如果浏览器中 Javascript 被禁用，则使用链接跳转 Link 组件中不应添加除 href 属性以外的属性，其余属性添加到 a 标签上。
Link组件通过 预取（在生产中）功能自动优化应用程序以获得最佳性能。
// 引入组件import Link from 'next/link'// 函数组件不需要引入 Reactfunction AboutPage() {return (<div>{/* Link 中必须要写 a 标签，href 必须写在 Link 中 */}<Link href="/list"><a>Go to list Pagea>Link><h3>Function Componenth3>div>)}export default AboutPage
静态资源
应用程序根目录中的 public 文件夹用于存放静态资源，通过以下形式进行访问：public/img/1.png->/img/1.pngpublic/css/style.css->/css/style.css
import React from 'react'class ListPage extends React.Component {render(){return <div><h3>ListPageh3>{/* 引入图片文件 */}<img src="/img/1.png" />div>}}export default ListPage
CSS样式
内置 styled-jsx：https://github.com/vercel/styled-jsx#readme
在 Next.js中内置了 styled-jsx ，它是一个CSS-in-JS库，允许在 React 组件中编写 CSS，CSS 仅作用于当前组件内部。
import React from 'react'class ListPage extends React.Component {render(){return <div><h3 >ListPageh3><p className="pra"> 这是一个p标签里面的内容 p><style jsx>{`.pra{color: red;}`}style>div>}}export default ListPage
CSS模块
通过使用CSS模块功能，允许将组件的 CSS 样式编写在单独的 CSS 文件中。
CSS 模块约定样式文件的名称必须为: 组件文件名称.module.css
创建 ./pages/list.module.css 文件并填写如下内容：
.prag{color:brown;font-size: 20px;}
import React from 'react'// 引入样式文件import ListStyle from './list.module.css'class ListPage extends React.Component {render(){return <div><h3 >ListPageh3>{/* 使用样式 */}<p className={ListStyle.prag}> 这是一个p标签里面的内容 p>div>}}export default ListPage
全局样式文件
1：在 pages 文件夹中新建 _ app. js 文件（文件名固定）。
2：在项目根目录下创建 styles 文件夹，并在其中创建 global.css。
3：在 _app.js 中通过 import 引入 global.css。global.css 中的样式，将会全局起作用。
/pages/_app.js 文件中的内容如下：
import '../styles/globals.css'// 固定代码function MyApp({ Component, pageProps }) {return <Component {...pageProps} />}export default MyApp
| 在新版框架中，已经帮我们做好相关内容及文件和代码。
下篇内容，让我们康康 Next.js 的服务端渲染和静态站点生成解决方案。
推荐阅读：
点点“赞”和“在看”，保护头发，减少bug。