init

Author: cnzhumr

.github/workflows/nextjs.yml

@@ -75,8 +75,9 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export || echo "next export is not needed with Next.js 13.3+"
+      # 移除这一步骤，因为 Next.js 15.x 不需要单独的 export 命令
+      # - name: Static HTML export with Next.js
+      #   run: ${{ steps.detect-package-manager.outputs.runner }} next export || echo "next export is not needed with Next.js 13.3+"
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

2024-07-13-11-45-30.md

@@ -0,0 +1,49 @@
+# Next.js GitHub Pages部署修复记录
+
+## 问题
+GitHub Pages部署失败，显示 "Deploy Next.js site to Pages / build (push) Failing after 21s"。
+
+## 原因分析
+1. Next.js 15.x版本需要特定的静态导出配置
+2. Tailwind CSS配置不完整或不兼容
+3. GitHub Actions工作流配置不适合新版Next.js
+
+## 解决方案
+
+### 1. 修改 next.config.ts
+- 添加 `output: 'export'` 配置以支持静态导出
+- 添加 `trailingSlash: true` 以兼容GitHub Pages的URL结构
+- 设置 `unoptimized: true` 以禁用服务器端图像优化
+
+```typescript
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+    output: 'export',
+    trailingSlash: true,
+    images: {
+        remotePatterns: [
+            // ...配置保持不变
+        ],
+        dangerouslyAllowSVG: true,
+        unoptimized: true,
+    },
+};
+
+export default nextConfig;
+```
+
+### 2. 更新GitHub Actions工作流配置
+- 删除不必要的 `next export` 命令，因为新版Next.js的`build`命令已经包含导出功能
+
+### 3. 修复Tailwind CSS配置
+- 更新 postcss.config.mjs 以正确配置Tailwind CSS和autoprefixer
+- 创建正确的tailwind.config.js文件在根目录
+- 在components.json中指向正确的Tailwind配置文件
+
+### 4. 修复包依赖
+- 添加autoprefixer和postcss依赖
+- 确保依赖版本兼容
+
+## 测试
+推送更改到GitHub仓库后，GitHub Actions应该能够成功构建并部署站点到GitHub Pages。 

components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "",
+    "config": "tailwind.config.js",
     "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,

next.config.ts

@@ -1,9 +1,10 @@
-import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
 
-const nextConfig: NextConfig = {
-    /* config options here */
-    output: 'export', // 添加静态输出配置，生成静态HTML文件
-    basePath: '', // 如果项目不在子目录下可以保持为空
+const nextConfig = {
+    output: 'export',
+    // 为了兼容 GitHub Pages，设置 trailingSlash 为 true
+    trailingSlash: true,
+    // 删除 basePath 配置，让它使用默认值
     images: {
         remotePatterns: [
             {

package.json

@@ -40,10 +40,11 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
-    "@types/react": "^init",
+    "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
     "prettier": "^3.5.3",
     "tailwindcss": "^4",
     "typescript": "^5"

postcss.config.mjs

@@ -1,5 +1,8 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
 
 export default config;

tailwind.config.js

@@ -0,0 +1,81 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "./data/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    screens: {
+      'tablet': '1280px',
+      'laptop': '1280px',
+    },
+    extend: {
+      spacing: {
+        "128": "32rem",
+        "high": "50rem",
+        "widequater": "14rem",
+        "wide": "60rem",
+        "wider": "73rem",
+        "landing": "88rem",
+      },
+      colors: {
+        "o-blue": "#00a0e8",
+        "o-light-blue": "#53c2f0",
+        "o-dark-blue": "#0c318f",
+        "o-white": "#e9e9e9",
+        "o-black": "#212121",
+        "o-gray": '#9ca3af',
+        "o-hover": '#f9fafb',
+        "demo-c1": '#00a0e8',
+        "demo-c2": '#d847f0',
+        "drama-white": "#ffffff",
+        "drama-black": "#0d0d0d",
+        border: "var(--color-border)",
+        input: "var(--color-input)",
+        ring: "var(--color-ring)",
+        background: "var(--color-background)",
+        foreground: "var(--color-foreground)",
+        primary: {
+          DEFAULT: "var(--color-primary)",
+          foreground: "var(--color-primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--color-secondary)",
+          foreground: "var(--color-secondary-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--color-destructive)",
+          foreground: "var(--color-destructive-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--color-muted)",
+          foreground: "var(--color-muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--color-accent)",
+          foreground: "var(--color-accent-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--color-popover)",
+          foreground: "var(--color-popover-foreground)",
+        },
+        card: {
+          DEFAULT: "var(--color-card)",
+          foreground: "var(--color-card-foreground)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius-lg)",
+        md: "var(--radius-md)",
+        sm: "var(--radius-sm)",
+        xl: "var(--radius-xl)",
+      },
+    },
+  },
+  plugins: [],
+}