一、初识NextJS
1、NextJS简介
Next.js 是一款基于 React 框架的轻量级服务端渲染框架，支持csr、ssr、isr、ssg等渲染方式。
2、服务器端渲染
服务器端渲染主要解决的问题还是搜索引擎的seo优化问题。如果你要开发的是一款博客、论坛之类提供资讯、文章的软件系统你就不得不考虑seo问题，搜索引擎本质是爬虫请求网页链接，获取服务器端返回的页面数据后以一定规则剔除标签和脚本、样式等干扰信息，解析其中有效文字内容、超链接等(对于其中的超链接依据算法会决定是否继续进入深一层请求，重复上述处理)，分析后的数据，搜索引擎会决定是否收录。
像vue、react之类打包发布的工程，页面返回的只剩下一个近乎空白的html页面以及js、css链接，对于seo来说有效的也就只有title和meta标签中内容了，这种工程核心数据通常都是js异步请求接口返回的，seo如果去分析js运行逻辑再模拟各种接口请求获取返回信息，太复杂会大量浪费系统资源，得不偿失，相信通常情况下搜索引擎不会去这么干。
为了解决上述问题服务器端渲染又重新回到大众视野，为什么说“又重新回到”，因为在十几年前服务器端渲染几乎是唯一做web开发的架构方式，在ajax还没有成为主流的时代，所有数据都是在服务器端生成，做个文章翻页都是一种折磨。全靠跳转链接得到新数据，跳转后再用各种页面标签解析数据，类似jstl/el表达式之类动态页面标签技术，若干年后富客户端盛行，再发展慢慢变成了vue、react这种打包工程，但是技术的发展却和seo的运行机理背道而驰。一些需要考虑seo的产品需求，逼得开发人员不得不继续沿用html、jquery、bootstrap这种传统方式开发内容系统。Next.js的服务器端渲染解决了这个棘手问题，当页面启用了服务器端渲染，使用浏览器的查看源码功能，可以在源码中搜索到文章标题、链接等标签内容，因此seo也就可以分析返回内容进行收录了。后续我们将进一步介绍服务器端渲染的细节原理。
3、准备工作
本文基于next.js 13版本构建，你的机器需要安装Node.js 16.14或更新的版本。
4、新建工程
zhb@bindeMacBook-Pro next_pro % npx create-next-app@latest my-app --typescript --tailwind --eslint
选项参考
✔ Would you like to use `src/` directory? … Yes
# 增加src源码文件夹，源码结构会清晰一些，也可以不加这一层级
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /Users/binzhu/dev/next_pro/next-bbs.
5、默认启动页
当app/page.tsx文件存在时，此页面将作为 http://localhost:3000 的默认启动页面
6、启动运行
cd my-app
npm run dev
7、页面效果
浏览器中访问：http://localhost:3000
iShot_2023-10-02_11.00.53.jpg
二、安装组件库
1、tailwind css简介
与bootstrap功能类似，省去手写css样式属性的烦恼，把样式属性封装成了class，多个class可以自由组合实现页面效果。更重要的还是提供响应式支持。创建工程时已经选择了安装tailwindcss所以这里不需要再单独安装。
2、shadcn/ui
(1) 介绍
基于radix-ui和tailwindcss构建的组件库，与以往组件库的最大区别，shadcn/ui不是以npm方式发布的组件库，而是以类似源码方式下载组件，组件核心功能引用radix-ui，但是对于可自定义修改部分例如样式等属性都暴漏在组件源码中，方便使用者自定义修改。以往发布式组件修改组件风格的方式很有限通常只能改颜色风格，shadcn/ui则灵活很多。同时大部分组件也支持服务器端渲染。打包体积更小，更加轻量化。
(2) 初始化
zhb@bindeMacBook-Pro next-bbs % npx shadcn-ui@latest init
Need to install the following packages:
shadcn-ui@0.4.0
Ok to proceed? (y) y
✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
# 如果创建工程时选择了use `src/` directory? … Yes这里要改成src/app/globals.css
✔ Would you like to use CSS variables for colors? … yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … yes
✔ Write configuration to components.json. Proceed? … yes
(3) 添加单个组件
npx shadcn-ui add [component]
# 示例
npx shadcn-ui add button
(4) 导入所有组件
通常按需单个组件导入即可，没有必要一次导入全部
npx shadcn-ui add
(5) 目录结构
iShot_2023-10-03_14.25.43.jpg
三、安装图标库
npm install lucide
四、最简单的路由示例
新版本的nextjs支持两种路由，原先的Pages Router，以及新增的App Router，我们工程里都使用的App Router来做示例。App Router中文件夹层级目录即为访问链接层级路径。
1、路由示例目录结构
iShot_2023-10-06_08.54.29.jpg
2、默认访问页示例
app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<div>src/app/layout.tsx框架</div>
{children}
</body>
</html>
)
}
app/page.tsx
export default function Home() {
return (
<div>Page Root</div>
)
}
页面输出结果如下：
src/app/layout.tsx框架
Page Root
3、第二层级页面(无二级定义layout.tsx)
app/page1/page.tsx
export default function Page1() {
return (
<div>Page1</div>
)
}
访问地址：http://localhost:3000/page1
页面输出结果如下：
src/app/layout.tsx框架
Page1
4、第二层级页面(存在二级定义layout.tsx)
（1）作用
如果子文件目录中存在layout.tsx文件，会逐级叠加页面内容
（2）页面代码
app/page2/layout.tsx
export default function Page2Layout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<div>src/app/page2/layout.tsx框架</div>
{children}
</>
)
}
app/page2/page.tsx
export default function Page2() {
return (
<div>page2</div>
)
}
访问地址：http://localhost:3000/page2
页面输出结果如下：
src/app/layout.tsx框架
src/app/page2/layout.tsx框架
page2
5、第三层级页面
app/page2/page3/page.tsx
export default function Page2() {
return (
<div>page2</div>
)
}
访问地址：http://localhost:3000/page2/page3
页面输出结果如下：
src/app/layout.tsx框架
src/app/page2/layout.tsx框架
page3
实际工程中更多的还是会使用到多个根布局的结构，比如工程内既有用户入口页面，又存在管理后台入口等情况，后续示例中将以multiple root layouts来构建。
网友评论