Next.js(1) | 青训营笔记

28 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 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 的一些有用信息。
image.png

查看布局时的疑惑:Flex

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column; //垂直方向排列
  justify-content: center;
  align-items: center;
}