Next.js GitHub Pages 项目教程

Next.js GitHub Pages 项目教程

nextjs-github-pages🚀 Deploy a Next.js app to Github Pages via Github Actions.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-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",

nextjs-github-pages🚀 Deploy a Next.js app to Github Pages via Github Actions.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-github-pages