Next.js 学习项目教程

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

Learn Next.js Starter Code

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

项目的目录结构及介绍

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 应用的行为和性能。

Learn Next.js Starter Code

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

登录后查看全文

热门内容推荐

1 【亲测免费】开源项目 `build-your-own-x` 使用指南 2 【亲测免费】探索科技之旅：《Build Your Own X》项目详解 3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用 4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Degrees of Lewdity中文汉化终极指南：零基础玩家必看的完整教程 Unity游戏翻译神器：XUnity Auto Translator 完整使用指南 PythonWin7终极指南：在Windows 7上轻松安装Python 3.9+终极macOS键盘定制指南：用Karabiner-Elements提升10倍效率 Pandas数据分析实战指南：从零基础到数据处理高手 Qwen3-235B-FP8震撼升级：256K上下文+22B激活参数 7步搞定机械键盘PCB设计：从零开始打造你的专属键盘终极WeMod专业版解锁指南：3步免费获取完整高级功能 DeepSeek-R1-Distill-Qwen-32B技术揭秘：小模型如何实现大模型性能突破音频修复终极指南：让每一段受损声音重获新生

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

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

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

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

昇腾LLM分布式训练框架

flutter_flutter

TorchAir 支持用户基于PyTorch框架和torch_npu插件在昇腾NPU上使用图模式进行推理。

ohos_react_native

React Native鸿蒙化仓库