做微信的网站有哪些,网站制作模板图片,做酒业网站的要求,青岛网站制作系统本文介绍建立一个简单的next.js 工程#xff0c;以及简单修改。然后也简单说了2种路由方式的选择。
开始next.js工程前需要node.js #xff0c; 还需要编辑器#xff0c;我这里选择的是visual code。如果没有安装node.js 请参考下#xff1a; visual code 下的node.js的he…本文介绍建立一个简单的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-applatest hello-world
或者
npx create-next-applatest
前者指定了工程名后者会提示你输入工程名
以后者为例运行界面如下 输入命令后提示输入工程名我这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 的教程又学了新版的教程。
