创建项目
命令
npm init next-app nextjs-blog-1- 然后选择 Default starter app
yarn dev- 用浏览器打开控制台给出的网址
Link快速导航
- 官方教程在此
用法
- 把
< a href= >点击跳转</ a>改成 <Link href=xxx><a>点击跳转</ a></Link>
优点
- 页面不会刷新，用AJAX请求新页面内容
- 不会请求重复的HTML、CSS、JS
- 自动在页面插入新内容、删除旧内容
- 因为省了很多请求和解析过程，所以速度极快
同构代码
代码运行在两端
- 在组件里写一句console.log('执行了')
- 你会发现Node控制台会输出这句话
- 你会发现Chrome控制台也会输出这句话
注意差异
- 不是所有的代码都会运行，有些需要用户触发
- 不是所有的API都能用，比如window在Node里报错
全局配置
pages/_app.js
- export default function App是每个页面的根组件
- 页面切换时App不会销毁，App里面的组件会销毁
- 可用App保存全局状态
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
注意
- 创建_app.js之后需要重启
yarn dev
全局CSS
放在_app.js里
import./styles/global.css- 因为切页面时App不会销毁
- 其他地方不能import global.css
- 其他地方只能写局部CSS
import styles from '../styles/Home.module.css'
export default function Home() {
return (
// styles module用法
<div className={styles.container}>
<h1>标题一</h1>
<p>段落</p>
<style jsx>{`
h1 {
color: red;
}
`}</style>
{/*添加global，影响全局的样式*/}
<style jsx global>{`
body {
background: yellow;
}
`}</style>
</div>
)
}
插曲
- 相对引用好烦，能改成
import 'styles/global.css'吗？ - 看文档「Absolute lmports」章节
创建jsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
局部CSS
官方支持
默认支持 styled-jsx和CSS Modules
一般来说，简单需求用前者，复杂需求用后者我的个人偏好
其他类型文件
图片
- 配置
file-loader - 或者直接用
next-images
SVG
- 一部分可以当作图片使用
- icons/svg要当作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' // 网站路径
}
}
]
})
return config
}
}
module.exports = nextConfig
- 目前没有插件，只能自己配置
更多
- 自己要loader，然后配置
next.config.js - 或者看有没有人封装成next插件
