在本地创建一个 Next.js 项目，可以使用 create-next-app。

打开终端，先进入到想要保存项目的地方，比如当前用户的桌面上。在本地开发 Next 项目需要用到 node 环境，所以你需要保证自己的电脑上已经安装好了 node.js。执行 node -v ，可以显示当前正在使用的 node.js 的版本号。

然后执行 npx create-next-app@latest 把项目放在 ninghao-nextjs 这个目录的下面，如果项目里需要使用 typescript，再加上一个 --typescript 选项，回车执行一下。提示是否要在项目里使用 ESLint ，直接回车，表示要使用 ESLint。

create-next-app 这个工具会帮我们准备好一个 next.js 项目。成功以后进入到项目所在目录 ninghao-nextjs，用编辑器打开项目目录，我用的是 vscode 编辑器。

先打开项目里的 package.json 观察一下，在 scripts 这里定义了几个自定义的命令，比如 dev 是启动项目开发服务用的，build 是编译应用的时候使用的命令。

开发应用的时候，需要在本地运行项目的开发服务，在终端，项目所在目录的下面，执行 npm run dev 。这个命令实际执行的是 next dev，它会创建一个本地的开发服务。复制一下这个服务的地址，在浏览器上打开这个地址。

字体问题

如果你发现服务一直没有反应，在终端这里一直显示正在编译，主要是因为 Next 里面有个 @next/font 这个包，它需要从 Google 下载项目需要用的字体，在国内可能会遇到一些网络问题。

所以我们可以从项目里删除掉这个包，执行 npm remove @next/font。

然后需要再修改一下项目，打开 index.tsx，去掉文件顶部导入的 @next/font/google。再去掉下面声明的这个 inter。

再找到组件视图里用的这个 inter.className 类。在当前文件里查找这个 className 属性，把它们全部替换成空白。

在终端，重新执行一下 npm run dev ，启动项目的开发服务。在浏览器访问一下 localhost:3000 ，现在这里就会显示 Next 项目的一个欢迎界面了。

回到项目，修改一下 index.tsx 这个组件里的，Head 里的 title 包装里的文字，改成 “宁皓网” ，保存一下文件以后，在浏览器上会实时显示修改之后的变化，刚才我们改的是页面的标题，你会发现，在标签上显示的文字现在会是 “宁皓网”。

下面再修改一下 main 标签里的东西，先把它里面的东西全部删除掉。然后用一组 h1 元素，包装的文字是“宁皓网”，下面再添加一组 div 元素，输入一行文字。保存一下文件，现在页面上会实时显示修改之后的结果。