先初始化一个项目
npm init next-app nectjs-blog-1
运行
yarn dev
创建/pages/posts/first-post.js文件，通过/posts/first-post来访问，不需要配置router，这是约定，约定大于配置，这是来自Rails的理念。
Link快速导航
<a href=xxx>点击跳转</a>
改成
<Link href=xxx><a>点击跳转</a></Link>
优点：
- 页面不会刷新，用Ajax请求新页面内容
- 不会请求重复的HTML、CSS、JS
- 自动在页面插入新内容、删除旧内容
因此节省了很多请求和解析的过程，所以速度极快
代码运行在两端
同构代码：一份代码，两端运行(省了一份)
我们发现Node控制台和Chrome控制台都输出了这句话
但是要注意，不是所有的代码都会是这样。
有些需要用户触发的比如onclick，
或者由于API的平台特异性，例如window会在node里报错。
全局配置
自定义head
使用<Head>
- 改变指定页面 title
- 改变指定页面 meta:viewport
import React, {useCallback} from "react";
import Link from 'next/link'
import Head from "next/head";
console.log('执行了')
export default function X() {
const clickMe = useCallback(() => {
console.log('you clicked me')
}, [])
return (
// 不能这样写，因为React规定只能有一个根组件
// <Head>
// <title>跳转页面</title>
// </Head>
// <div>
// First Post <button onClick={clickMe}>click me</button>
// <hr/>
// 回到首页 <Link href="/"><a>点击这里</a></Link>
// </div>
// <> === <React.Fragment>
<>
<Head>
<title>跳转页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
</Head>
<div>
First Post <button onClick={clickMe}>click me</button>
<hr/>
回到首页 <Link href="/"><a>点击这里</a></Link>
</div>
</>
)
}
pages/_app.js
export default function App 是每个页面的根组件
页面切换时App不会销毁，App里面的组件会销毁
可以用App保存全局状态
如何改变全局title & meta:viewport?
// 在_app.js中配置
import '../styles/globals.css'
import Head from "next/head";
function MyApp({Component, pageProps}) {
return <div className="marshall">
<Head>
<title>Marshall's blog</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
</Head>
<Component {...pageProps} />
</div>
}
export default MyApp
全局CSS
放在_app.js里，因为切换页面时App不会销毁，其他地方只能写局部css
import '../styles/global.css'
静态资源
next推荐放在public/里，但是我不是很赞同，因为如果放在public/里边就不支持改文件名，也就是不支持在文件后➕hash后缀，这样会导致文件无法更新。
而且文件没有加缓存就会导致CDN无力每次都要重新向服务器发送请求
nextjs无法处理png文件，我们可以查文档自己配置。
图片类型的文件我们可以配置file-loader或者直接使用next-images
SVG类型文件一部分可以当作图片使用，icon.svg要当作SVG Symbols使用，目前没有插件，只能自己配置
其它类型的文件自己查loader，然后配置进next.config.js，或者看看有没有人封装成next插件
网友评论