Next.js GitHub Pages 项目教程
1. 项目的目录结构及介绍
gregrickaby/nextjs-github-pages/
├── app/
├── public/
│ └── nojekyll
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── README.md
- app/: 存放应用程序的主要代码文件。
- public/: 存放公共资源文件,如
nojekyll
文件用于禁用 GitHub Pages 的 Jekyll 构建。 - next.config.js: Next.js 的配置文件。
- package.json: 项目的依赖和脚本配置文件。
- postcss.config.js: PostCSS 的配置文件。
- tailwind.config.ts: Tailwind CSS 的配置文件。
- tsconfig.json: TypeScript 的配置文件。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件主要是 package.json
中的脚本配置。以下是一些常见的脚本命令:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
- dev: 启动开发服务器。
- build: 构建生产环境的应用。
- start: 启动生产环境的应用。
- lint: 运行代码检查。
3. 项目的配置文件介绍
next.config.js
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/**
* Enable static exports for the App Router
*
* @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
*/
output: "export",
/**
* Set base path. This is the slug of your GitHub repository.
*
* @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
*/
basePath: "/nextjs-github-pages",
/**
* Disable server-based image optimization. Next.js does not support this for static exports.
*
* @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
*/
images: {
unoptimized: true,
},
};
module.exports = nextConfig;
- output: 设置为
"export"
以启用静态导出。 - basePath: 设置为 GitHub 仓库的 slug,用于 GitHub Pages。
- images: 禁用服务器端图像优化。
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
- tailwindcss: 启用 Tailwind CSS。
- autoprefixer: 启用自动前缀添加。
tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
};
export default config;
- content: 指定 Tailwind CSS 扫描的文件路径。
- theme: 主题配置,可以扩展默认主题。
- plugins: 添加其他插件。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"allowJs": true,
"checkJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",