一雕什、初識NextJS
1缠俺、NextJS簡介
Next.js 是一款基于 React 框架的輕量級服務(wù)端渲染框架显晶，支持csr、ssr壹士、isr磷雇、ssg等渲染方式。
2躏救、服務(wù)器端渲染
服務(wù)器端渲染主要解決的問題還是搜索引擎的seo優(yōu)化問題唯笙。如果你要開發(fā)的是一款博客、論壇之類提供資訊盒使、文章的軟件系統(tǒng)你就不得不考慮seo問題崩掘，搜索引擎本質(zhì)是爬蟲請求網(wǎng)頁鏈接，獲取服務(wù)器端返回的頁面數(shù)據(jù)后以一定規(guī)則剔除標(biāo)簽和腳本少办、樣式等干擾信息苞慢，解析其中有效文字內(nèi)容、超鏈接等(對于其中的超鏈接依據(jù)算法會決定是否繼續(xù)進(jìn)入深一層請求英妓，重復(fù)上述處理)挽放，分析后的數(shù)據(jù)绍赛，搜索引擎會決定是否收錄。
像vue辑畦、react之類打包發(fā)布的工程吗蚌，頁面返回的只剩下一個近乎空白的html頁面以及js、css鏈接纯出，對于seo來說有效的也就只有title和meta標(biāo)簽中內(nèi)容了蚯妇，這種工程核心數(shù)據(jù)通常都是js異步請求接口返回的，seo如果去分析js運行邏輯再模擬各種接口請求獲取返回信息暂筝，太復(fù)雜會大量浪費系統(tǒng)資源侮措，得不償失，相信通常情況下搜索引擎不會去這么干乖杠。
為了解決上述問題服務(wù)器端渲染又重新回到大眾視野分扎，為什么說“又重新回到”，因為在十幾年前服務(wù)器端渲染幾乎是唯一做web開發(fā)的架構(gòu)方式胧洒，在ajax還沒有成為主流的時代畏吓，所有數(shù)據(jù)都是在服務(wù)器端生成，做個文章翻頁都是一種折磨卫漫。全靠跳轉(zhuǎn)鏈接得到新數(shù)據(jù)菲饼，跳轉(zhuǎn)后再用各種頁面標(biāo)簽解析數(shù)據(jù)，類似jstl/el表達(dá)式之類動態(tài)頁面標(biāo)簽技術(shù)列赎，若干年后富客戶端盛行宏悦，再發(fā)展慢慢變成了vue、react這種打包工程包吝，但是技術(shù)的發(fā)展卻和seo的運行機理背道而馳饼煞。一些需要考慮seo的產(chǎn)品需求，逼得開發(fā)人員不得不繼續(xù)沿用html诗越、jquery砖瞧、bootstrap這種傳統(tǒng)方式開發(fā)內(nèi)容系統(tǒng)。Next.js的服務(wù)器端渲染解決了這個棘手問題嚷狞，當(dāng)頁面啟用了服務(wù)器端渲染块促，使用瀏覽器的查看源碼功能，可以在源碼中搜索到文章標(biāo)題床未、鏈接等標(biāo)簽內(nèi)容竭翠，因此seo也就可以分析返回內(nèi)容進(jìn)行收錄了。后續(xù)我們將進(jìn)一步介紹服務(wù)器端渲染的細(xì)節(jié)原理薇搁。
3斋扰、準(zhǔn)備工作
本文基于next.js 13版本構(gòu)建，你的機器需要安裝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源碼文件夾呀狼，源碼結(jié)構(gòu)會清晰一些，也可以不加這一層級
? 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损离、默認(rèn)啟動頁
當(dāng)app/page.tsx文件存在時哥艇，此頁面將作為 http://localhost:3000 的默認(rèn)啟動頁面
6、啟動運行
cd my-app
npm run dev
7僻澎、頁面效果
瀏覽器中訪問：http://localhost:3000
二貌踏、安裝組件庫
1、tailwind css簡介
與bootstrap功能類似窟勃，省去手寫css樣式屬性的煩惱祖乳，把樣式屬性封裝成了class，多個class可以自由組合實現(xiàn)頁面效果秉氧。更重要的還是提供響應(yīng)式支持眷昆。創(chuàng)建工程時已經(jīng)選擇了安裝tailwindcss所以這里不需要再單獨安裝。
2汁咏、shadcn/ui
(1) 介紹
基于radix-ui和tailwindcss構(gòu)建的組件庫亚斋，與以往組件庫的最大區(qū)別，shadcn/ui不是以npm方式發(fā)布的組件庫攘滩，而是以類似源碼方式下載組件帅刊，組件核心功能引用radix-ui，但是對于可自定義修改部分例如樣式等屬性都暴漏在組件源碼中漂问，方便使用者自定義修改赖瞒。以往發(fā)布式組件修改組件風(fēng)格的方式很有限通常只能改顏色風(fēng)格，shadcn/ui則靈活很多蚤假。同時大部分組件也支持服務(wù)器端渲染栏饮。打包體積更小，更加輕量化勤哗。
(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
# 如果創(chuàng)建工程時選擇了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) 導(dǎo)入所有組件
通常按需單個組件導(dǎo)入即可抡爹，沒有必要一次導(dǎo)入全部
npx shadcn-ui add
(5) 目錄結(jié)構(gòu)
三、安裝圖標(biāo)庫
npm install lucide
四芒划、最簡單的路由示例
新版本的nextjs支持兩種路由，原先的Pages Router欧穴，以及新增的App Router民逼，我們工程里都使用的App Router來做示例。App Router中文件夾層級目錄即為訪問鏈接層級路徑涮帘。
1拼苍、路由示例目錄結(jié)構(gòu)
2、默認(rèn)訪問頁示例
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>
)
}
頁面輸出結(jié)果如下：
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
頁面輸出結(jié)果如下：
src/app/layout.tsx框架
Page1
4疮鲫、第二層級頁面(存在二級定義layout.tsx)
（1）作用
如果子文件目錄中存在layout.tsx文件吆你，會逐級疊加頁面內(nèi)容
（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
頁面輸出結(jié)果如下：
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
頁面輸出結(jié)果如下：
src/app/layout.tsx框架
src/app/page2/layout.tsx框架
page3
實際工程中更多的還是會使用到多個根布局的結(jié)構(gòu)俊犯，比如工程內(nèi)既有用戶入口頁面妇多，又存在管理后臺入口等情況，后續(xù)示例中將以multiple root layouts來構(gòu)建燕侠。
