三分钟启动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的功能远不止这些，想要深入学习，需要不断的实践和联系。