完整教程：Next.js项目演示（从零创建Next.js项目）Next.js入门实战

如果你是前端开发方面刚入行的新手, 又或者你心里头想要去学那个React的服务器端渲染框架, 那么Next.js这件事儿, 绝对来说是一个相当好的开始的地方。此时此刻呢。今天我就要来带你一步一步地去创建一个非常简单的Next.js项目, 哪怕你是那种完全没有任何基础的初出茅庐者。

什么是Next.js？

Next.js是一个基于React的框架, 它提供了很多开箱即用的功能, 比如。

准备工作

在正式展开内容之前,你必须得去确定一个事实, 这个事实就是你已经在你的设备上面把Node.js这个软件给完整地安装好了, 因为Next.js这一个框架它是基于Node.js来运行的, 所以按照常规的逻辑顺序来说的话, 你就必须先要把Node.js这一步一步的安装工作给做完了。

前往Node.js官方网站去下载那个安装包, 并且把它给装上, 这里建议最好是选择LTS这个版本来安装, 等你成功把这东西装完之后, 再去打开终端工具也就是大家常说的命令行界面, 在里面输入下面这些命令内容, 以此来检查看看它是不是已经成功地被安装好了。

bash 复制代码

node -v

npm -v

如果那个地方能够显示出版本号, 这就说明了安装的工作已经成功了。接着, 就要执行创建Next.js项目这个操作。

现在, 我们就进入到, 创建我们的第一个Next.js项目的这个环节了, 开始。

步骤1：创建项目目录

首先, 我们要建立一个全新的文件夹, 这个全新的文件夹是用来存放我们的项目的。

bash 复制代码

mkdir nextjs-demo

cd nextjs-demo

我们来做步骤第二步啊, 这一步主要是把Next.js这个项目给初始化一下。

在项目目录当中, 使用npx命令来创建Next.js项目。

bash 复制代码

npx create-next-app@latest

系统现在会启动一个交互式的向导程序, 用来进行设置, 在这个过程中, 会问用户几个问题。

复制代码

What is your project named? (nextjs-demo)

Would you like to use TypeScript?

(No / Yes) → 选择 No

Would you like to use ESLint? (No / Yes) → 选择 No

Would you like to use Tailwind CSS?

(No / Yes) → 选择 No

Would you like to use `src/` directory with the App Router? (No / Yes) → 选择 No

Would you like to use a custom `app/` directory?

(No / Yes) → 选择 No

What import alias would you like to use? (Leave empty to use the default) → 直接回车

等待项目创建完成（大约需要1到2分钟）。

步骤3：安装依赖

等这个项目的创建动作结束之后, 那些依赖的东西一般就会自动被装好。要是发现它没有自己去完成安装这个步骤, 那你就可以自己动手, 去运行下面的那个命令:

bash 复制代码

npm install

我们来做第4步操作, 具体就是把开发服务器启动起来。

此刻, 我们能够开启那个叫做开发服务器东西了:

bash 复制代码

npm run dev

这时候程序就会开始启动那个用于开发的服务器, 并且会在终端那个窗口里面显示出跟下面一样的信息出来。

复制代码

Ready on http://localhost:3000

我们得把那个浏览器的页面给点开, 好去瞧一瞧。

在网页浏览器那个地方, 地址栏里头输入一个3000端口号, 然后你点开它, 接着你就能看见Next.js这个框架弄出来的那种默认欢迎页面了。

了解项目结构

Next.js这个项目的整体构造, 实际上是比较轻松的, 并不复杂:

复制代码

nextjs-demo/

├── node_modules/

├── pages/

│ ├── index.js # 默认首页

│ └── ...

├── public/

├── styles/

├── package.json

└── ...

我们对我们的第一个页面进行定制性的处理工作。

咱们把那个默认的首页动一下, 好叫它显现出属于咱们自己的那些个内容的样子来。

打开 pages/index.js 这个文件, 接着就把里面的内容全都换掉, 换成下面的样子:

js 复制代码

export default function Home() {

return (

<h1 style={``{ color: '#0070f3' }}>欢迎来到我的Next.js应用</h1>

这是我第一个Next.js页面！Next.js让React应用的开发变得简单而高效。

</p>

<strong>提示：</strong>你可以随时修改这个页面内容，保存后浏览器会自动更新。

</p>

</div>

)

}

先把文件保存起来, 接着去刷新一下浏览器页面, 这样你应当就能观察到更新之后的显示内容了。

去把那个新页面的添加操作给完成。

我们呢可以再添加出一个新的页面来, 这个方面比如说"关于"这个类型的页面内容也是可行的哈。

你可以在那个叫作 pages 的文件夹里面, 去新建一个全新的文件, 然后把这个文件的名字取名为 about.js。

bash 复制代码

touch pages/about.js

打开编辑 about.js 这个文件, 具体的内容在下面展示。

js 复制代码

export default function About() {

return (

这是我的关于页面。

Next.js的路由系统让创建新页面变得非常简单。

</p>

你可以在 <code>pages/about.js</code> 文件中修改这个页面。

</p>

</div>

)

}

然后, 打开浏览器去访问地址 :3000/about, 在这个时候, 你应该是能够看到那个新的。

请注意, 这里使用的是通过链接来进行页面或视图跳转的导航方式。需要特别说明的是, 这段演示所使用的代码, 是基于next那个框架的第15.5.4这个版本来编写的。

Next.js这个工具里是有那个叫做Link的组件存在的, 然后人们用这个东西来做页面的跳转, 这样就可以不去刷新整个页面了。

你需要打开那个叫作 pages/index.js 的文件, 然后把下面这段代码添加到当前这个页面里面去。

js 复制代码

import Link from 'next/link'

export default function Home() {

return (

<h1 style={``{ color: '#0070f3' }}>欢迎来到我的Next.js应用</h1>

这是我第一个Next.js页面！

Next.js让React应用的开发变得简单而高效。

</p>

<Link

href="/about"

style={``{

backgroundColor: '#0070f3',

color: 'white',

padding: '0.8rem 1.5rem',

borderRadius: '4px',

textDecoration: 'none'

}}

>

前往关于页面

</Link>

</div>

)

}

保存文件, 然后在浏览器中点击"前往关于页面"这个链接, 应该会跳转到About页面, 但不会刷新整个页面。

在实际运行的时候, 你能够看到一个比较简单的页面情况的发生, 这个简单页面的内部具体包含了"欢迎来到我的Next.js应用"这样一个具体的内容展示, 同时也会存在一个用于点击操作的"前往关于页面"的一个链接按钮。

在创建项目这个操作的执行过程里边, 假若出现了错误的情况, 那么应该如何来进行处理呢。

A: 你要确保你把自己电脑上安装的 Node.js 这个软件更新到了最新的版本, 要是那个问题还是照样出现的话, 你就试试看亲手运行一下 npm 这个工具来把相关的依赖内容给装上去。

为什么会发生这样的一种情况呢, 那就是我的页面它根本没有完成更新这个动作。

A: Next.js的开发服务器通常会自动去检测文件的变化并且重新加载, 但是如果问题还是存在的话, 那么就试一试重启开发服务器, 具体做法是用Ctrl+C来停止然后重新运行npm run dev。

你提到说想要使用某个东西, 那你觉得具体该用哪样的步骤来实现这个目的?

A: 在创建项目时候, 只需要选择yes就行了。Next.js会为你把所有配置设置好的。

结束语

首先, 向你发送祝贺消息, 表示你这边已经顺利地把你的那一个Next.js项目给创建出来了, 并且也把它成功地运行起来了。在此过程中, 你已经掌握了一些内容, 具体来说, 你已经学会了以下几点。

关于Next.js, 它具备诸多性能优越的特质, 目前仍需要你进行深入的发掘与尝试, 诸如通过API路由来进行接口的处理、采用特定手段完成数据的提取工作、以及整合各类CSS框架以便对样式进行管理等一系列关键环节。

下一步

目前为止, 大家对于Next.js的基础知识部分都已经学习完了, 接着可以进入到下一步骤了。

真心希望这个教程对你能够起到一点帮助的作用, 如果在这个过程中你遇到了任何的问题或者疑惑, 那就非常欢迎你到评论区里去留下你的声音。

请你一定要动手试一试, 毕竟你已经完成了学习 Next.js 的初始步骤, 而在之后的日子里, 你还需要通过持续不断的实践以及广泛的探索来进一步深入。