Next.js 学习项目教程
next-learnLearn Next.js Starter Code项目地址:https://gitcode.com/gh_mirrors/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 应用的行为和性能。
next-learnLearn Next.js Starter Code项目地址:https://gitcode.com/gh_mirrors/ne/next-learn