三分钟启动next.js项目
近日见闻
马斯克旗下公司 xAI 的第一款AI模型曝光！名为：Grōk ，有望成为ChatGPT最强竞品！--马斯克
Rickrack焰火十二卷 v2.8.41更新，开源调色板软件。--rickrack
Ant Design 5.11.0 发布，企业级 UI 设计语言和 React 实现。--AntDesign
谷歌 Chrome 开发者博客官宣：Chrome 已默认启用 WebAssembly 垃圾回收 (WasmGC) 功能 —— 能够将具有 GC 的编程语言编译为 WebAssembly (Wasm)。--google
next.js快速创建一个示例应用
首先，我们使用create-next-app创建一个新的Next.js应用：
npx?create-next-app@latest?my-app
注意：
Need?to?install?the?following?packages:
create-next-app@14.0.1
Ok?to?proceed??(y)?y
npm?WARN?EBADENGINE?Unsupported?engine?{
npm?WARN?EBADENGINE???package:?'create-next-app@14.0.1',
npm?WARN?EBADENGINE???required:?{?node:?'>=18.17.0'?},
npm?WARN?EBADENGINE???current:?{?node:?'v18.16.0',?npm:?'9.8.1'?}
最新版本，需要node版本大于等于18.17.0，需要注意下。
然后，进入新创建的应用目录：
cd?my-app
在pages目录下，你会发现一个名为index.js的文件，这个文件对应的是应用的主页。
import?React?from?'react';
import?Link?from?'next/link';
function?HomePage()?{
return?(
Welcome?to?Next.js!
This?is?the?home?page?of?our?Next.js?application.
About
);
}
export?default?HomePage;
然后，我们要创建一个关于页面。在pages目录下，创建一个新的文件about.js：
import?React?from?'react';
import?Link?from?'next/link';
function?AboutPage()?{
return?(
About
This?is?the?about?page?of?our?Next.js?application.
Home
);
}
export?default?AboutPage;
现在，启动应用：
npm?run?dev
在浏览器中访问http://localhost:3000，看到主页可以点击"About"链接到关于页面，然后在关于页面点击"Home"链接返回主页。
这只是一个非常基础的Next.js应用，而Next.js的功能远不止这些，想要深入学习，需要不断的实践和联系。
- 发表于:
- 原文链接：https://page.om.qq.com/page/O9nznla85gB-47Eoz6-aStnQ0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
