这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
参考英文官网,学习包地址作者已更新,中文网代码repo地址不存在 Setup - Create a Next.js App | Learn Next.js (nextjs.org)
创建Next.js APP
设置
首先,让我们确保您的开发环境已准备就绪。
- 如果您没有安装 Node.js,请从此处安装它。您需要 Node.js 版本 10.13 或更高版本。
- 在本教程中,您将使用自己的文本编辑器和终端应用程序。
如果您使用的是 Windows,我们建议您下载 Git for Windows 并使用随附的 Git Bash,它支持本教程中特定于 UNIX 的命令。Windows Subsystem for Linux(WSL)是另一种选择。
创建Next.js应用
若要创建 Next.js 应用,请打开终端,进入要在其中创建应用的目录,然后运行以下命令:cd
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
在后台,它使用名为create-next-app的工具,该工具可为您引导Next.js应用程序。它通过标志使用此模板。--example
如果它不起作用,请查看此页面。
运行开发服务器
现在,您有一个名为 的新目录。让我们进入它:nextjs-blogcd
cd nextjs-blog
然后,运行以下命令:
npm run dev
这会在端口 3000 上启动 Next.js 应用的“开发服务器”(稍后会详细介绍)。
让我们检查一下它是否正常工作。从浏览器中打开 http://localhost:3000。
欢迎来到Next.js
当您访问 http://localhost:3000 时,您应该会看到这样的页面。这是初学者模板页面,其中显示了有关 Next.js 的一些有用信息。
查看布局时的疑惑:Flex
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column; //垂直方向排列
justify-content: center;
align-items: center;
}