Next.js是什么
它是Node.js的全棸Ｔ框架
- CSS要寫在JS中禁荒；
- 可以頁面預(yù)渲染 + SSR（Server Side Render服務(wù)端渲染）；
- 前后端同構(gòu)（代碼同時運行在兩端）徽缚；
- 支持React 和 TypeScript;
- 不支持Vue（Vue對應(yīng)的是Nust.js）星虹；
Next.js的弱項
- 沒有提供數(shù)據(jù)庫相關(guān)功能，可自行搭配 Sequelize 或 TypeORM灾螃；
- 沒有提供測試相關(guān)功能呻拌，可自行搭配 Jest 或 Cypress；
- 有一個 Blitz.js 框架正在完善以上內(nèi)容睦焕；
安裝
按照官網(wǎng)命令安裝即可藐握；
在.gitignore中添加上/.idea/和/.vscode（它兩是編輯器的一些內(nèi)容）這兩個路徑；
下面開始一點一點改動代碼垃喊；
Link 快速導(dǎo)航
加頁面
創(chuàng)建pages/posts/my-post.js猾普；
傳統(tǒng)導(dǎo)航
- 假如從page1到page2，請求得到page2的html本谜，解析html的時候發(fā)現(xiàn)有css和js初家，就再去請求css文件和js文件；
快速導(dǎo)航
-
快速導(dǎo)航從page1到page2乌助，就只會得到page2的一個js文件溜在，因為所有的HTML、CSS他托、JS都打包到這個js文件里了掖肋，然后再去更換頁面里的內(nèi)容；
image.png
優(yōu)點
- 頁面不會刷新赏参，而是發(fā)一個AJAX請求到新頁面的內(nèi)容（返回一個js志笼，js中包含新頁面的html、css和js）把篓；
- 不會請求重復(fù)的HTML纫溃、CSS、JS（因為所有內(nèi)容都打包成一個js了韧掩，就不用再去請求html和css了）紊浩；
- 自動在頁面插入新頁面的內(nèi)容，刪除舊頁面的內(nèi)容疗锐；
- 因為省了很多請求和解析過程坊谁，所以速度很快；
同構(gòu)代碼
代碼會在兩端同時運行
- 在組件里寫
console.log('winwin')窒悔，你會發(fā)現(xiàn)Node控制臺和瀏覽器控制臺都打印出這句話了呜袁；
注意差異
- 不是所有代碼都會運行，例如一些需要用戶去觸發(fā)的操作简珠；
- 也不是所有API都能用阶界，例如window在Node里就會報錯虹钮，因為只有瀏覽器里才有 window對象啊膘融；
全局配置
創(chuàng)建
- 創(chuàng)建
/pages/_app.js來進行全局配置芙粱；
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
- 這個MyApp組件會注入到每個頁面，是每個頁面的根組件氧映；
- 創(chuàng)建_app.js之后需要重啟
yarn dev
自定義Head
- 可以改頁面的title和meta春畔；
- 可以在各自組件定義，也可以在_app.js中全局定義岛都；
- 若組件內(nèi)有定義Head律姨，優(yōu)先顯示組件內(nèi)的Head；
全局CSS
- 在_app.js里
import '../styles/globals.css'（css要放在styles目錄下臼疫，styles與pages平級）择份； - 其他地方不能import globals.css；
- 其他地方只能寫局部CSS荣赶；
局部CSS
1、官方支持
- 使用
styled-jsx鸽斟，文檔，但它不方便分離CSS和JS富蓄； - 使用CSS Modules， 文檔格粪，它用起來有點麻煩氛改，
className={styles.error}帐萎，每個className都要寫個styles胜卤；
2、第三方
- 也可以使用styled-components
更改基本路徑
- 在文件中你不想寫
import '../styles/globals.css'葛躏，想寫成import 'styles/globals.css' - 新建jsconfig.json文件，代碼如下：
{
"compilerOptions": {
"baseUrl": "." //意思是基于我的項目根目錄來找
}
}
使用scss
- 安裝依賴
yarn add sass舰攒； - 直接把后綴
.css改成.scss即可败富；
靜態(tài)資源
- next推薦放在public/里兽叮，文檔
其他類型文件
圖片
- 可以自己配置file-loader芬骄；
- 當然可以直接用next封裝好的next-images插件；
- 也可以用官方的
<Image />組件鹦聪，next/image账阻；
更多類型
- 自己找loader，然后配置next.config.js泽本；
- 或者看是否有封裝成next插件淘太；
擴展知識
- 對于webpack中l(wèi)oader的配置，
outputPath輸出路徑是硬盤路徑规丽，publicPath公共路徑是網(wǎng)站路徑
{
test: /\.png$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'static',
publicPath: '_next/static'
}
}
]
}
