Next.js 学习项目教程

2026-01-18 10:02:47作者：霍妲思

项目的目录结构及介绍

Next.js 学习项目的目录结构如下：

next-learn/
├── assets/
│   └── images/
├── components/
│   ├── layout.js
│   └── nav.js
├── pages/
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
│   └── api/
│       └── hello.js
├── public/
│   └── favicon.ico
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── .next.config.js
├── package.json
└── README.md

目录结构介绍

assets/: 存放项目所需的静态资源，如图片等。
components/: 存放可重用的 React 组件。
pages/: 存放页面组件和 API 路由。
- _app.js: 自定义应用组件，用于全局布局和状态管理。
- _document.js: 自定义文档组件，用于修改 HTML 和 Body 标签。
- index.js: 首页组件。
- api/: 存放 API 路由文件。
public/: 存放公开的静态文件，如 favicon 等。
styles/: 存放全局和模块化的 CSS 文件。
.gitignore: 指定 Git 忽略的文件和目录。
.next.config.js: Next.js 配置文件。
package.json: 项目依赖和脚本配置文件。
README.md: 项目说明文档。

项目的启动文件介绍

Next.js 项目的启动文件主要包括 pages/_app.js 和 pages/_document.js。

`pages/_app.js`

_app.js 文件用于自定义应用组件，可以在这里进行全局布局、状态管理和错误处理等操作。示例如下：

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

`pages/_document.js`

_document.js 文件用于自定义文档组件，可以在这里修改 HTML 和 Body 标签。示例如下：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

项目的配置文件介绍

Next.js 项目的配置文件主要是 .next.config.js。

`.next.config.js`

.next.config.js 文件用于配置 Next.js 应用的各种选项，如环境变量、构建配置、API 路由等。示例如下：

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
};

配置项介绍

reactStrictMode: 启用 React 严格模式。
images: 配置图片优化选项，如允许的域名等。

通过以上配置，可以灵活地调整 Next.js 应用的行为和性能。

next-learn

Learn Next.js Starter Code

项目地址：https://gitcode.com/GitHub_Trending/ne/next-learn

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

kernel

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

471

465

pytorch

Ascend Extension for PyTorch

本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

Java

flutter_flutter

本仓库是 Flutter SDK 与 Flutter Engine 的 OpenHarmony 适配版本，由 CPF-Flutter 团队维护。开发者可使用熟悉的 Flutter 技术栈开发 OpenHarmony 应用，3.35.7 及以后的适配版本可基于本仓库源码构建支持 OpenHarmony 的 Flutter Engine。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

Rust

2.09 K

217