快速开始
欢迎各位进行阅读 Next.js 文档!
若是你是刚开始接触 Next.js 的话, 我们这边会向你做出建议, 让你先从这个地方的互动课程开始做起。
通过这些带有小测验的互动课程, 你将会学到使用 Next.js 所需的全部知识。
如果你有关于 next.js 相关的任何问题, 你可以随时在上面去向我们的社区寻求帮助的这样一个行为是得到欢迎的。
我们建议大家去使用那个叫作 -next-app 的命令来创建一个全新的 Next.js 应用程序, 因为这个做法可以自动地、妥善地为你处理好所有必须的相关事项。如果你想要着手创建出这个项目的话, 那么, 请你务必运行以下的内容:
bash
npx create-next-app@latest
# or
yarn create next-app
如果用户是想要去开发一个项目的话, 那么可以通过添加 -- 参数的方式来进行新项目的创建操作。
bash
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
在安装完毕之后。
对于使用 -next-app 的相关情况, 大家如果有想要了解的详细信息, 不妨去翻看一下关于 -next-app 的文档说明。
为你的项目安装 next、react 和 react-dom :
bash
npm install next react react-dom
# or
yarn add next react react-dom
找到那个叫做 .json 的文件, 把它给打开, 然后在里面加上那段叫做配置的东西, 也就是配置段。
json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}

这些脚本所关联的范畴, 覆盖了在开发应用软件的过程里面所存在的不同的阶段。
Next.js这个技术, 它是绕着那个叫页面的概念来建立的。所谓一个页面, 它其实就是指从名为pages的目录里面找出来的那些用英文写的JS、JSX、TS或者TSX文件。而这些文件导出的, 就叫做React组件。
页面(page)是根据它自己所在的那个文件名,跟路由之间产生关联关系的。举个例子来说话, pages/about.js 这个文件, 就被映射到了 /about 这个地方去。甚至于, 还可以在文件名内部的位置, 加入动态路由所使用到的参数的。
请在你的项目里面去创建一个叫做 pages 的目录。
请把下面的这些内容, 给填充到那个叫作 ./pages/index.js 的文件里面去。
jsx
function HomePage() {
return <div>Welcome to Next.js!div>
}
export default HomePage
迄今为止, 我们能够确认到的是。
另外, 在任何时候, 您开发的基于 Next.js 构建的项目都能直接被放到生产环境里去做使用, 要是想了解关于这些事情的详细信息的话, 您可以去我们的相关的部署文档里面去进行阅读。
咱们在后续的时候, 建议去把下面列出来的那几个章节好好地读一下、学一学。
关于Next, 可以进一步去了解一下所谓的pages这个玩意儿到底是什么。
对 CSS 的支持这一块, 是采用内置的 CSS 支持这种方式, 来向应用程序添加自定义样式的。
CLI了解有关 Next.js CLI 的更多信息。