Next.js是什么
它是Node.js的全棧框架
- CSS要寫在JS中；
- 可以頁(yè)面預(yù)渲染 + SSR（Server Side Render服務(wù)端渲染）；
- 前后端同構(gòu)（代碼同時(shí)運(yùn)行在兩端）；
- 支持React 和 TypeScript;
- 不支持Vue（Vue對(duì)應(yīng)的是Nust.js）；
Next.js的弱項(xiàng)
- 沒(méi)有提供數(shù)據(jù)庫(kù)相關(guān)功能，可自行搭配 Sequelize 或 TypeORM；
- 沒(méi)有提供測(cè)試相關(guān)功能，可自行搭配 Jest 或 Cypress；
- 有一個(gè) Blitz.js 框架正在完善以上內(nèi)容；
安裝
按照官網(wǎng)命令安裝即可；
在.gitignore中添加上/.idea/和/.vscode（它兩是編輯器的一些內(nèi)容）這兩個(gè)路徑；
下面開(kāi)始一點(diǎn)一點(diǎn)改動(dòng)代碼；
Link 快速導(dǎo)航
加頁(yè)面
創(chuàng)建pages/posts/my-post.js；
傳統(tǒng)導(dǎo)航
- 假如從page1到page2，請(qǐng)求得到page2的html，解析html的時(shí)候發(fā)現(xiàn)有css和js，就再去請(qǐng)求css文件和js文件；
快速導(dǎo)航
-
快速導(dǎo)航從page1到page2，就只會(huì)得到page2的一個(gè)js文件，因?yàn)樗械腍TML、CSS、JS都打包到這個(gè)js文件里了，然后再去更換頁(yè)面里的內(nèi)容；
image.png
優(yōu)點(diǎn)
- 頁(yè)面不會(huì)刷新，而是發(fā)一個(gè)AJAX請(qǐng)求到新頁(yè)面的內(nèi)容（返回一個(gè)js，js中包含新頁(yè)面的html、css和js）；
- 不會(huì)請(qǐng)求重復(fù)的HTML、CSS、JS（因?yàn)樗袃?nèi)容都打包成一個(gè)js了，就不用再去請(qǐng)求html和css了）；
- 自動(dòng)在頁(yè)面插入新頁(yè)面的內(nèi)容，刪除舊頁(yè)面的內(nèi)容；
- 因?yàn)槭×撕芏嗾?qǐng)求和解析過(guò)程，所以速度很快；
同構(gòu)代碼
代碼會(huì)在兩端同時(shí)運(yùn)行
- 在組件里寫
console.log('winwin')，你會(huì)發(fā)現(xiàn)Node控制臺(tái)和瀏覽器控制臺(tái)都打印出這句話了；
注意差異
- 不是所有代碼都會(huì)運(yùn)行，例如一些需要用戶去觸發(fā)的操作；
- 也不是所有API都能用，例如window在Node里就會(huì)報(bào)錯(cuò)，因?yàn)橹挥袨g覽器里才有 window對(duì)象??；
全局配置
創(chuàng)建
- 創(chuàng)建
/pages/_app.js來(lái)進(jìn)行全局配置；
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
- 這個(gè)MyApp組件會(huì)注入到每個(gè)頁(yè)面，是每個(gè)頁(yè)面的根組件；
- 創(chuàng)建_app.js之后需要重啟
yarn dev
自定義Head
- 可以改頁(yè)面的title和meta；
- 可以在各自組件定義，也可以在_app.js中全局定義；
- 若組件內(nèi)有定義Head，優(yōu)先顯示組件內(nèi)的Head；
全局CSS
- 在_app.js里
import '../styles/globals.css'（css要放在styles目錄下，styles與pages平級(jí)）； - 其他地方不能import globals.css；
- 其他地方只能寫局部CSS；
局部CSS
1、官方支持
- 使用
styled-jsx，文檔，但它不方便分離CSS和JS； - 使用CSS Modules， 文檔，它用起來(lái)有點(diǎn)麻煩，
className={styles.error}，每個(gè)className都要寫個(gè)styles；
2、第三方
- 也可以使用styled-components
更改基本路徑
- 在文件中你不想寫
import '../styles/globals.css'，想寫成import 'styles/globals.css' - 新建jsconfig.json文件，代碼如下：
{
"compilerOptions": {
"baseUrl": "." //意思是基于我的項(xiàng)目根目錄來(lái)找
}
}
使用scss
- 安裝依賴
yarn add sass； - 直接把后綴
.css改成.scss即可；
靜態(tài)資源
- next推薦放在public/里，文檔
其他類型文件
圖片
- 可以自己配置file-loader；
- 當(dāng)然可以直接用next封裝好的next-images插件；
- 也可以用官方的
<Image />組件，next/image；
更多類型
- 自己找loader，然后配置next.config.js；
- 或者看是否有封裝成next插件；
擴(kuò)展知識(shí)
- 對(duì)于webpack中l(wèi)oader的配置，
outputPath輸出路徑是硬盤路徑，publicPath公共路徑是網(wǎng)站路徑
{
test: /\.png$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'static',
publicPath: '_next/static'
}
}
]
}
