Next 是什么
- 简单说就是，一个基于 JavaScript 工具来创建全栈 Web 应用框架。
- 文档参考：https://nextjs.org/learn/foundations/about-nextjs
创建一个 Next.js app用于学习
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 该命令，使用名为 create-next-app 的工具，通过 --example 标志使用此模板，这会为引导创建 Next.js 应用程序。
打开Package js 可以看大相关命令。
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
}
}
- 执行
npm run dev会启动一个http服务用于测试，(http://localhost:3000/) -
启动后的页面如下：
image.png
尝试修改编辑这个默认的启动页面
用记事本或IDE打开文件
pages/index.js将原来的 Welcome to Next.js! 修改成 Welcome to Next.js with Kami! 就可以看到页面的变化，这个页面的组成也是一个标准的React暴露函数。如果你了解React第这个页面应该不陌生
尝试给程序添加更多页面
- 创建如下目录结构：
pages/index.js 这个关联到跟路由，上面实际上已经关联了。
pages/posts/first-post.js 这个关联 /posts/first-post 路由，这是我们接下来要做的事儿。
- 目录和文件创建好后，在 first-post.js 填写内容：
export default function FirstPost() {
return <h1>First Post</h1>;
}
- 尝试运行
http://localhost:3000/posts/first-post返回页面数据非常简单。
image.png
通过 next/link 组件添加连接
- 可以修改 pages/index.js 添加如下代码测试 Link，添加后刷新 http://localhost:3000
<h1 className="title">
Read <Link href="/posts/first-post">this page!</Link>
</h1>
image.png
- 如上完成了个基本的a 标签跳转，为什么要用 <Link> 而不是 <a> 这是因为 <Link> 是一个前端JS的一个客户端导航链接，这不会直接刷新后端的HTTP所以访问速度是非常快的。
结束
- 接下来学习他的 Assets, Metadata, and CSS 相关内容。
