創(chuàng)建項(xiàng)目
命令
npm init next-app nextjs-blog-1- 然后選擇 Default starter app
yarn dev- 用瀏覽器打開控制臺(tái)給出的網(wǎng)址
Link快速導(dǎo)航
- 官方教程在此
用法
- 把
< a href= >點(diǎn)擊跳轉(zhuǎn)</ a>改成 <Link href=xxx><a>點(diǎn)擊跳轉(zhuǎn)</ a></Link>
優(yōu)點(diǎn)
- 頁面不會(huì)刷新，用AJAX請求新頁面內(nèi)容
- 不會(huì)請求重復(fù)的HTML、CSS、JS
- 自動(dòng)在頁面插入新內(nèi)容、刪除舊內(nèi)容
- 因?yàn)槭×撕芏嗾埱蠛徒馕鲞^程聪铺，所以速度極快
同構(gòu)代碼
代碼運(yùn)行在兩端
- 在組件里寫一句console.log('執(zhí)行了')
- 你會(huì)發(fā)現(xiàn)Node控制臺(tái)會(huì)輸出這句話
- 你會(huì)發(fā)現(xiàn)Chrome控制臺(tái)也會(huì)輸出這句話
注意差異
- 不是所有的代碼都會(huì)運(yùn)行亥揖，有些需要用戶觸發(fā)
- 不是所有的API都能用妙同，比如window在Node里報(bào)錯(cuò)
全局配置
pages/_app.js
- export default function App是每個(gè)頁面的根組件
- 頁面切換時(shí)App不會(huì)銷毀砚蓬，App里面的組件會(huì)銷毀
- 可用App保存全局狀態(tài)
import '../styles/globals.css'
import Head from 'next/head'
function MyApp({Component, pageProps}) {
return (
<>
<Head>
{/*公共頭部*/}
<title>我的blog - kong</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApp
注意
- 創(chuàng)建_app.js之后需要重啟
yarn dev
全局CSS
放在_app.js里
import./styles/global.css- 因?yàn)榍许撁鏁r(shí)App不會(huì)銷毀
- 其他地方不能import global.css
- 其他地方只能寫局部CSS
import styles from '../styles/Home.module.css'
export default function Home() {
return (
// styles module用法
<div className={styles.container}>
<h1>標(biāo)題一</h1>
<p>段落</p>
<style jsx>{`
h1 {
color: red;
}
`}</style>
{/*添加global，影響全局的樣式*/}
<style jsx global>{`
body {
background: yellow;
}
`}</style>
</div>
)
}
插曲
- 相對(duì)引用好煩盆色，能改成
import 'styles/global.css'嗎灰蛙？ - 看文檔「Absolute lmports」章節(jié)
創(chuàng)建jsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
局部CSS
官方支持
默認(rèn)支持 styled-jsx和CSS Modules
一般來說，簡單需求用前者隔躲，復(fù)雜需求用后者我的個(gè)人偏好
其他類型文件
圖片
- 配置
file-loader - 或者直接用
next-images
SVG
- 一部分可以當(dāng)作圖片使用
- icons/svg要當(dāng)作SVG Symbols使用
const nextConfig = {
reactStrictMode: true,
webpack: (config, options)=> {
config.module.rules.push({
test: '/\.(png|jpg|svg|jpeg|gif)$/',
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static', // 硬盤路徑
publicPath: '_next/static' // 網(wǎng)站路徑
}
}
]
})
return config
}
}
module.exports = nextConfig
- 目前沒有插件摩梧，只能自己配置
更多
- 自己要loader，然后配置
next.config.js - 或者看有沒有人封裝成next插件
