因为公司的前台项目需要做seo优化，单页应用项目是不适合做seo的，然后就选择了next.js，之前是搞vue出身了，react简直就是个白纸，菜鸟。
我们都知道如果在react中路由跳转使用，link 和 this.history.push
那么在 next中怎么跳转的呢，和怎么获取参数呢。
其实也是这两种呢， 只不过next可能封装了下吧
-
也是link方式
import Link from "next/link"
使用
注意它这个是 使用的 href 好像 和 react中还有点不用 react中是 to
<link href="/home"><a>跳转到首页</a></Link>
同时link是不支持兄弟标签的 比如 下面这种就不是正确的
<link href="/home">
<a>跳转到首页</a>
<a>跳转到首页</a>
</Link>
当然有的时候 会在Link中放入一个 组件 ,或者放置一个函数组件的话 ，可以去官网做深入了解 飞机票哈
这就不赘述了 ，只做简单入门
link也支持 对象形式的写法,
<link href={{pathname: '/', query: ''}}></Link>
- 第二种跳转方式 就是 通过js方式跳转了
import Router from "next/router"
他这个也是有两个写法
Router.push('/?name=zyc');
Router.push({pathname: '/', query: {}})
- 说完了 跳转 传值 那么就要说下 怎么接受参数了
接受参数也是两种，
一种就是 withRouter 二种是 useRouter（hook用法）
我这里全用 函数组件做例子哈
withRouter方式 这个在之前的react版本中可能用的也比较多
import { withRouter } from 'next/router'
const Post = ({router}) => {
const { pid } = router.query
console.log(router, '============')
return <p>Post: {pid}</p>
export default withRouter(Post)
useRouter方式 hooks方式
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
console.log(router, '============')
return <p>Post: {pid}</p>
export default Post
关注我 持续更新前端知识 一起 努力
使用 Next.js 有很多好处，但一个非常有用的特性是它的文件路由系统。这种架构显着简化了在网站内创建路由的过程。在本教程中，我们将学习如何设置 Next.js 项目以及 Next.js 中的文件路由系统如何工作。
我们还将学习如何：
创建静态和动态页面
Link用, 以及它的一些 props实现页面转换
使用useRouter()钩子从 URL 获取查询参数
动态嵌套路由
……还有更多。
我们将通过构建一个投资组合页面来了解所有这些。
Next.js 功能
Next.js 是一个基于 R
next-webgl
像2018年一样使用OpenGL。
这个程序演示了如何在React中使用WebGL。 现代JavaScript和热重装使其非常适合快速原型制作和在线演示。 借助Next.js导出功能，可以轻松将其部署到静态Web托管中。
安装并将其bin/目录添加到$PATH 。 确保从命令行可以使用node和npm ：
$ node --version
v10.1.0
$ npm --version
6.0.1
安装/更新npm和yarn：
npm install -g npm yarn
克隆该存储库， cd进入其中，并使用以下命令安装依赖项：
cd next-webgl/
yarn install
为了方便起见，将./node_modules/.bin添加到$PATH ：
export PATH=./node_modules/.bin:${PATH
完美的入门工具包，可使用Next.js和Notion构建漂亮的网站。
Next.js Notion入门工具包完美的入门工具包，可用于通过Next.js和Notion构建漂亮的网站。
简介此仓库是我用来为我的个人博客/投资组合网站transivebullsh.it供电的功能。
它使用Notion作为CMS，从根Notion文档中获取内容，然后使用Next.js和react-notion-x呈现所有内容。
然后将该站点部署到Vercel。
功能设置仅需几分钟（单个配置文件）:flexed_biceps:通过react-notion-x对Notion内容提供强大的支持
转到并创建一个新的API密钥。 将.env.example重命名为.env.local并在其中添加API密钥。
NEXT_PUBLIC_PEXELS_API_KEY =
通过运行以下命令来安装依赖项。
npm install
启动开发服务器：
npm run dev
yarn dev
用浏览器打开以查看结果。
您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。
要了解有关Next.js的更多信息，请查看以下资源：
-了解Next.js功能和API。
交互式Next.js教程。
您可以查看-欢迎您提供反馈和意见！
在Vercel上部署
部署Next.js应用程序的最简单方法是使用Next.js创建者提供的Vercel平台。
请查看我们的Nex
Nextjs里的路由相对于传统ReactRouter路由更能满足SEO优化的需求，通过路径来进行路由更能被搜索引擎收录。相当于localhost:3000/user/:id这个id可以动态改变，都可以访问到对应的文件。参考：nextjs.cn/docs/basic-features/script。见： nextjs.cn/docs/basic-features/pages。值得注意的是这样的js脚本都是在页面最好执行的。效果如下："/"代表从public目录下开始。如：完成动态路由的跳转。
http://localhost:3000/ 代表的 /page/index.tsx.
http://localhost:3000/demo指的是page --> demo -->index.tsx文件。
2.动态路由
在 Next.js 中，您可以将括号添加到页面 ([param]) 以创建动态路由（也称为 url slugs、pretty urls 等）。pages/post/[pid..
next.js给我们配置好路由了，next.js默认匹配pages目录的index.js作为根路径/，其他的路径也是这样按文件名匹配的。而我们的各种路由跳转依赖的不再是react-router而是next.js给我们封装好的路由
在pages文件夹新建文件夹 my ，在my里新建my.js
在浏览器输入 http://localhost:3000/my/my，就能跳转到my页...
例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，但也会匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。例如，app/shop/[[…slug]]/page.js也将匹配/shop，此外还有/shop/衣服、/shop/服装/上衣、/shop/服装/上衣/t恤。如博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态分段。
router.beforeEach((to, from, next) => {
let token = window.sessionStorage.getItem('token');
if (to.path != '/login' && !token) {...
