学习next.js的第一天：项目创建失败、<Link>使用

一、项目创建失败

官方文档：Setup - 创建 Next.js 应用程序 | Learn Next.js | Next.js中文网

创建一个 Next.js 应用

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

实际使用

报错

原因

根据文档命令路径无法找到learn-starter文件

解决方案： ctrl+鼠标左击进入文件所在地址，找到learn-starter所在路径，修改命令行路径，即可。

正确命令

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

注：命令行： "create-next-app"为创建命令， "--use-npm" 表示你想要使用 npm 而不是默认的 yarn 来管理依赖 "nextjs-blog" 为项目名称，可以改为自己想要的名称，"--example"指向创建模板路径

二、<Link>使用

官方文档：Link Component - Navigate Between Pages | Learn Next.js | Next.js中文网

实际使用

报错

原因

版本更新，文档未更新。13及更新版本关于<Link>使用时更新为无需再添加<a>作为子元素，直接使用即可。

解决方案

1、直接使用<Link href=""></Link>

2、添加属性legacyBehavior

<Link legacyBehavior><a id="link">Home</a></Link>

3、npx @next/codemod new-link .

将全局替换<Link href=""><a></a></Link>为<Link href=""></Link>

最新文档参考：介绍 | Next.js 中文网。