Next.js 入门
2020-06-29 本文已影响0人
YQY_苑
创建项目
npm init next-app [项目名]
// 选择 Default starter app
cd next-demo
touch .gitignore
yarn dev
// 浏览器打开控制台给出的网址，创建成功
image.png
image.png
约定大于配置
- 创建pages/posts/first-post.js
- 访问路径 /posts/first-post
示例
import React from "react";
import Link from "next/link";
export default function firstPost() {
return (
<React.Fragment>
<div>
first Post
<hr/>
// Link快速导航
<Link href="/post/first-post"><a>去第一篇文章!</a></Link>
<h1>看看</h1>
</div>
<style jsx> // 局部样式 styled-jsx
{`
h1{
color:yellow;
}
p{
color: black;
}
`}
</style>
</React.Fragment>
)
}
Link快速导航标签式导航文档
使用Link 代替a标签。
原理：Link组件对链接进行劫持，当点击链接时，自动进行请求该链接资源，然后替换当前页面的样式和数据。
优点
- 页面不会刷新，利用ajax请求新页面内容，然后替换当前页面
- 不会请求后重复HTML,CSS,JS
- 自动在页面插入新内容，删除就内容
- 省略很多请求和解析过程，所以速度极快
全局配置
- page目录下进行_app.js 文件，
export default function App,是每个页面的根组件 - 切换页面是App不销毁，App里面的子组件会销毁
- App可保存全局状态
// page/_app.js
import React from "react";
import Head from "next/head";
import "styles/global.css" // 全局样式，不会销毁
import png from "static/img/kk.png"
export default function App({Component, pageProps}) {
return (
<div className="YQY">
<Head>
<title>我的博客 --- YQY</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
</Head>
<img src={png} alt=""/>
<Component {...pageProps}/>
</div>
)
}
总结
-
创建项目
npm init next-app [项目名] -
快速导航
<Link href="/xxx"><a>xxx</a></Link>
-
同构代码
- 一份代码，两端运行
-
全局组件
- pages/_app.js
-
自定义head
- 使用Head组件
-
全局CSS
<style jsx>
<style jsx global>
xxx.module.css
