next.js 开发网站的hello world

本文介绍建立一个简单的next.js 工程,以及简单修改。然后也简单说了2种路由方式的选择。

开始next.js工程前需要node.js , 还需要编辑器,我这里选择的是visual code。如果没有安装node.js 请参考下: visual code 下的node.js的hello world_visual studio code中的文件中node.js-CSDN博客

如何检测node.js是否安装好,就是在终端运行 node -v 或者 node --version 如果显示版本号就说明好了,我的显示版本v18.18.0 。好像要求16.0 以上。

如果没问题,我们就在终端运行:

npx create-next-app@latest hello-world

或者

npx create-next-app@latest 

前者指定了工程名,后者会提示你输入工程名

以后者为例,运行界面如下:

输入命令后提示输入工程名,我这hello

下面是选项,按左右键选择yes 或者 no 回车就是确认。

现在你就按我的选择做选择,选择完后会运行一段时间,然后是下面结果:建立了工程在hello 目录下。

接下来 cd hello

然后 code . 打开visual code

打开visual code 的主要目的是看目录结果和编辑文件。

在visual code 打开终端运行: npm run dev

操作界面如下:

 这个界面里 有个 http://localhost:3000 

按照 ctrl 点击他就打开浏览器。 其实也可直接在浏览器里输入。

浏览器界面如下:

这就是我们建立的hello工程运行效果。

打开visual code 界面如下:

点开app 目录,点击打开page.tsx,找到如下部分,把这部分改为 Hello World

 

修改后保存文件,浏览器内容立即改变了,如下:

 

我们的hello World 出现了。

现在再修改 ,彻底简化 page.tsx 如下:

我们保存后,看到简单的 hello world 如下:

 

这是一个很简单的hello World 但还是有条纹背景。这是因为还有css

打开visual code ,这次选择layout.tsx ,注释掉

import './globals.css'

保存后,这时条纹消失了:

 

next.js文件的结构是 app 目录下有layout.tsx 这是一个布局文件,他里面的children 就是他所有的孩子,这里指page.tsx。因为他有一个全局的import './globals.css' ,这个css 文件影响全局。

再回到上面建立时的选择 would you like to use src/directory 如果选择yes ,那么app 等源文件就在src 目录下。这会影响目录的结构。

还有一个选择是: Would you like to use App Router? (recommended) 我们选择的是 yes,这是推荐的,这影响路由方式,也可选择no 那就是13版以前(就是12版)的路由方式,现在还是保留了。

如果看官方的教程,这2种方式各有一个教程,选择yes 就是下面的教程。 

Learn Next.js | Next.js

老版路由方式教程是page router:

Create a Next.js App | Learn Next.js 

我开始选了老版的教程,发现别人的不是这样的,发现还有app router 的教程,又学了新版的教程。