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

登录后查看全文

Next.js 学习项目教程

项目的目录结构及介绍

目录结构介绍

项目的启动文件介绍

pages/_app.js

pages/_document.js

项目的配置文件介绍

.next.config.js

配置项介绍

项目优选

`pages/_app.js`

`pages/_document.js`

`.next.config.js`