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

docs

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

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

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

RuoYi-Vue3

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

无需学习 Kubernetes 的容器平台，在 Kubernetes 上构建、部署、组装和管理应用，无需 K8s 专业知识，全流程图形化管理

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。