next.js学习记录：页面导航和静态数据的处理

Next.js入门学习记录1

创建Next.js应用

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

页面导航

1. next.js 中的 pages 文件夹

   前端页面一般写在 pages 文件夹下面，前端路由与pages下面的文件夹名称相关联

   • pages/index.js 就是前端 / 路由
   • pages/posts/first-post.js 就是前端 /posts/first-post 路由

2. next.js 中的超链接

   在next.js中的超链接用 Link 组件来包裹 a 链接，next.js允许Link在应用中进行页面跳转。

   • 使用 Link 组件

     // 引入组件
     import Link from 'next/link';
     
     <Link href="/">返回首页</Link>
     

   • Link 组件的客户端导航
     Link 组件在页面中使用的是客户端导航，客户端导航意味页面跳转使用的是使用 javascript，这比默认的浏览器导航是快的

   • 代码分割和预加载