三分钟启动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应用：

代码语言：javascript复制

npx create-next-app@latest my-app

注意：

代码语言：javascript复制

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，需要注意下。

然后，进入新创建的应用目录：

代码语言：javascript复制

cd my-app

在pages目录下，你会发现一个名为index.js的文件，这个文件对应的是应用的主页。

代码语言：javascript复制

import React from 'react';
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is the home page of our Next.js application.</p>
      <p>
        <Link href="/about">
          <a>About</a>
        </Link>
      </p>
    </div>
  );
}

export default HomePage;

然后，我们要创建一个关于页面。在pages目录下，创建一个新的文件about.js：

代码语言：javascript复制

import React from 'react';
import Link from 'next/link';

function AboutPage() {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page of our Next.js application.</p>
      <p>
        <Link href="/">
          <a>Home</a>
        </Link>
      </p>
    </div>
  );
}

export default AboutPage;

现在，启动应用：

代码语言：javascript复制

npm run dev

在浏览器中访问http://localhost:3000，看到主页可以点击"About"链接到关于页面，然后在关于页面点击"Home"链接返回主页。

这只是一个非常基础的Next.js应用，而Next.js的功能远不止这些，想要深入学习，需要不断的实践和联系。

基础开发者垃圾回收设计实践

0 人点赞