前言

什么是 Hook？

什么是自定义Hook？

我们为什么需要自定义Hook？

如何实现一个自定义Hook？

需求

1. 在信息流页面实现一个搜索框，这个页面里有一个输入框，下面是一个用于展示信息流的组件；

2. 你需要实现基于用户名、内容以及tag的搜索；

3. 信息流中有可以点击的tag，tag点击后的行为需要反应到输入框中，进行搜索；

4. 搜索行为对输入具有响应性，用户在完成输入后不需要手动敲击回车，而是会自动进行搜索。

分析需求

1. 我们不仅需要通过输入框拿到输入内容，同时还需要将tag的内容反应到输入框中，所以需要同时提供searchText和handleSearchChange，即：

<input
  type="text"
  placeholder="Search for a tag or username"
  value={searchText}
  onChange={handleSearchChange}
  required
  className="search_input peer"
/>

2. 在输入框外面的form里，我们需要处理表单的提交行为，即敲击回车后，需要提交表单，即提供一个handleSubmit

<form className="relative w-full flex-center" onSubmit={handleSubmit}>
  <input
    type="text"
    placeholder="Search for a tag or username"
    value={searchText}
    onChange={handleSearchChange}
    required
    className="search_input peer"
  />
</form>

3. 在下面的信息流组件中，我们显然需要拿到数据，即提供一个posts，且tag既然可以点击，我们也需要一个handleTagClick

<PromptCardList data={posts} handleTagClick={handleTagClick} />

4. 我们不光需要在hook内发送拿到feed数据的请求（主要是搜索），我们还需要考虑到，在页面挂载的时候，我们需要手动进行一次posts请求，拿到数据进行展示，所以需要提供一个fetchPosts 。

useEffect(() => {
    fetchPosts()
  }, [])

5. 我们需要对输入内容具有响应性，这实际上是一个“防抖”功能的实现

实现自定义Hook

import { useState, useEffect, useRef } from 'react'

const useSearchPosts = (initialSearchText = '') => {
  const [searchText, setSearchText] = useState(initialSearchText)
  const [posts, setPosts] = useState([])
  const timeoutId = useRef(null)

  // 获取所有 prompt
  const fetchPosts = async () => {
    const response = await fetch('/api/prompt')
    const data = await response.json()
    setPosts(data)
  }

  // 根据搜索关键词获取 prompt
  const fetchSearchPosts = async search => {
    const response = await fetch('/api/prompt/search?searchText=' + search)
    const data = await response.json()
    setPosts(data)
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  // 防抖
  useEffect(() => {
    if (searchText.trim()) {
      const newTimeout = setTimeout(() => {
        fetchSearchPosts(searchText)
      }, 1000)
      timeoutId.current = newTimeout
      console.log('set!', newTimeout)
      return () => clearTimeout(newTimeout)
    } else {
      fetchPosts()
      return () => clearTimeout(timeoutId.current)
    }
  }, [searchText])

  const handleSearchChange = e => {
    setSearchText(e.target.value)
  }

  const handleSubmit = e => {
    e.preventDefault()
    console.log('clear by submit', timeoutId.current)
    clearTimeout(timeoutId.current)
    fetchSearchPosts(searchText)
  }

  const handleTagClick = tag => {
    setSearchText(tag)
    // 需要等待searchText更新完毕，再清除副作用带来的定时器
    setTimeout(() => {
      console.log('clear by tag', timeoutId.current)
      clearTimeout(timeoutId.current)
    }, 0)
    fetchSearchPosts(tag) // 立即执行搜索
  }

  return {
    searchText,
    posts,
    fetchPosts,
    handleSearchChange,
    handleSubmit,
    handleTagClick
  }
}

export default useSearchPosts

前言

不可预见和难以理解的异步行为

const [searchText, setSearchText] = useState(initialSearchText)
const [timeoutId, setTimeoutId] = useState(null)
// 根据搜索关键词获取 prompt
const fetchSearchPosts = async () => {
  const response = await fetch('/api/prompt/search?searchText=' + searchText)
  const data = await response.json()
  setPosts(data)
}
// 防抖
useEffect(() => {
  if (searchText.trim()) {
    const newTimeout = setTimeout(() => {
      console.log('fetch by useEffect, searchText now: ', searchText)
      fetchSearchPosts()
    }, 1000)
    setTimeoutId(newTimeout)
    console.log('set!', newTimeout)
    return () => clearTimeout(newTimeout)
  } else {
    fetchPosts()
    return () => clearTimeout(timeoutId)
  }
}, [searchText])
const handleTagClick = tag => {
  setSearchText(tag)
  
  // 立即触发类型，清除定时器
  setTimeout(() => {
    console.log('clear by tag', timeoutId)
    clearTimeout(timeoutId)
    console.log('fetch by tag, searchText now: ', searchText)
    fetchSearchPosts()
  }, 0)
}

1. setSearchText(tag) 触发useEffect ，首先执行useEffect 内的部分；

2. const newTimeout = setTimeout 成为下一个宏任务，暂时挂起；

3. setTimeoutId(newTimeout) 将 timeoutId 更新为最新的计时器；

4. 打印 ‘set!’, 127

5. 继续执行handleTagClick 中剩余的代码

setTimeout(() => {
  console.log('clear by tag', timeoutId)
  clearTimeout(timeoutId)
  console.log('fetch by tag, searchText now: ', searchText)
  fetchSearchPosts()
}, 0)

打印'clear by tag 120'

6. 根据旧的 searchText 发送请求fetchSearchPosts()

7. 等待 1s 的时间后，执行

const newTimeout = setTimeout(() => {
  console.log('fetch by useEffect, searchText now: ', searchText)
  fetchSearchPosts()
}, 1000)

内部的代码，根据最新的searchText 发送请求

1. 定时器清理失败

2. 由于定时器清理失败，发送了两次请求，但由本不该发送的那次请求完成了功能（即 useEffect 内本来被清理的请求），而本来发挥作用的，在handleClick 内的请求却发送了错误的请求（searchText更新前的内容，即点击 tag 前的文本框内容）

定时器清理失败

const [searchText, setSearchText] = useState(initialSearchText)
const timeoutId = useRef(null)
const handleTagClick = tag => {
  setSearchText(tag)
  // 需要等待searchText更新完毕，再清除副作用带来的定时器
  setTimeout(() => {
    console.log('clear by tag', timeoutId.current)
    clearTimeout(timeoutId.current)
  }, 0)
  fetchSearchPosts() // 立即执行搜索
}

请求错误

import { useState, useEffect, useRef } from 'react'

const useSearchPosts = (initialSearchText = '') => {
  const [searchText, setSearchText] = useState(initialSearchText)
  const [posts, setPosts] = useState([])
  const timeoutId = useRef(null)

  // 获取所有 prompt
  const fetchPosts = async () => {
    const response = await fetch('/api/prompt')
    const data = await response.json()
    setPosts(data)
  }

  // 根据搜索关键词获取 prompt
  const fetchSearchPosts = async search => {
    const response = await fetch('/api/prompt/search?searchText=' + search)
    const data = await response.json()
    setPosts(data)
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  // 防抖
  useEffect(() => {
    if (searchText.trim()) {
      const newTimeout = setTimeout(() => {
        fetchSearchPosts(searchText)
      }, 1000)
      timeoutId.current = newTimeout
      console.log('set!', newTimeout)
      return () => clearTimeout(newTimeout)
    } else {
      fetchPosts()
      return () => clearTimeout(timeoutId.current)
    }
  }, [searchText])

  const handleSearchChange = e => {
    setSearchText(e.target.value)
  }

  const handleSubmit = e => {
    e.preventDefault()
    console.log('clear by submit', timeoutId.current)
    clearTimeout(timeoutId.current)
    fetchSearchPosts(searchText)
  }

  const handleTagClick = tag => {
    setSearchText(tag)
    // 需要等待searchText更新完毕，再清除副作用带来的定时器
    setTimeout(() => {
      console.log('clear by tag', timeoutId.current)
      clearTimeout(timeoutId.current)
    }, 0)
    fetchSearchPosts(tag) // 立即执行搜索
  }

  return {
    searchText,
    posts,
    fetchPosts,
    handleSearchChange,
    handleSubmit,
    handleTagClick
  }
}

export default useSearchPosts

前言

1. 使用 nextjs 作为整体框架

2. 使用next-auth/react 实现谷歌登录

3. 使用 MongoDB 实现后端数据库（不得不感叹实在太方便了，直接就是一个在线服务，可以直接在 github page 这样的静态网站托管服务上部署网站，而且小体量还是免费的，良心企业）

4. 使用tailwindCSS 写样式（这个项目和我之前写的 Portfolio 项目同样都用了这个，对于写样式来说实在是太方便了）

搜索功能实现

从搜索框开始考虑

const handleSearchChange = e => {
    setSearchText(e.target.value)
  }

<form className="relative w-full flex-center" onSubmit={handleSubmit}>
  <input
    type="text"
    placeholder="Search for a tag or username"
    value={searchText}
    onChange={handleSearchChange}
    required
    className="search_input peer"
  />
</form>

1. 针对输入内容响应式的发送请求；

2. 按回车后立刻发送请求

useEffect(() => {
    if (searchText.trim()) {
    // 搜索文本不为空，进行搜索
      fetchSearchPosts()
    } else {
    // 搜索文本为空，重新获取所有数据
      fetchPosts()
    }
  }, [searchText])

1. 每次输入触发一个定时器，1s 后触发发送请求；

2. 在触发请求之前清空上一次的定时器，避免重复触发。

1. 依赖项变化时；

2. 组件卸载时。

// 处理防抖，同时记录最新的 timeoutId，便于清除
const [timeoutId, setTimeoutId] = useState(null)
const fetchSearchPosts = async () => {
  const response = await fetch('/api/prompt/search?searchText=' + searchText)
  const data = await response.json()
  setPosts(data)
}
useEffect(() => {
  if (searchText.trim()) {
    const newTimeout = setTimeout(() => {
      fetchSearchPosts()
    }, 1000)

    setTimeoutId(newTimeout)
    // 返回一个清除 timeout 的函数，会在下次 useEffect 调用/组件卸载时执行（so sweet）
    return () => clearTimeout(newTimeout)
  } else {
    fetchPosts()
    return () => clearTimeout(timeoutId)
  }
}, [searchText])

const handleSubmit = e => {
  e.preventDefault()
  clearTimeout(timeoutId)
  fetchSearchPosts()
}

搜索 api 实现

1. 基于 username 进行查询

2. 基于 tag 进行查询

3. 基于 prompt 的正文进行查询

// Prompt
import { Schema, model, models } from 'mongoose'

const PromptSchema = new Schema({
  creator: {
    type: Schema.Types.ObjectId,
    ref: 'User'
  },
  prompt: {
    type: String,
    required: [true, 'Prompt is required']
  },
  tag: {
    type: String,
    required: [true, 'Tag is required']
  }
})

const Prompt = models.Prompt || model('Prompt', PromptSchema)
export default Prompt

// User
import { Schema, model, models } from 'mongoose'

const UserSchema = new Schema({
  email: {
    type: String,
    unique: [true, 'Email already exists'],
    required: [true, 'Email is required']
  },
  username: {
    type: String,
    required: [true, 'Username is required'],
    match: [
      /^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/,
      'Username invalid, it should contain 8-20 alphanumeric letters and be unique!'
    ]
  },
  image: {
    type: String
  }
})

const User = models.User || model('User', UserSchema)

export default User

1. 首先在 User 表中搜索符合条件的 username 对应的 id；

2. 然后在 Prompt 表中使用 or 条件（或者 and 条件，看你想做什么，我这里为了搜索出来结果多一点就用 or 了）加上 id 的判断

import Prompt from '@/models/prompt'
import User from '@/models/user'
import { connectToDB } from '@/utils/database'

export const GET = async request => {
  const { searchParams } = new URL(request.url)
  const searchText = searchParams.get('searchText')

  try {
    await connectToDB()
    // 拆分关键词
    const keywordArray = searchText.split(' ').filter(kw => kw.trim() !== '')

    // 构建关键词表达式组
    const regexArray = keywordArray.map(kw => new RegExp(kw, 'i'))

    // 查询所有满足条件的用户
    const userConditions = regexArray.map(kw => ({ username: { $regex: kw } }))
    const users = await User.find({ $or: userConditions })
    const userIds = users.map(user => user._id)

    // 查询满足条件的prompts
    const prompts = await Prompt.find({
    // 用空格区分的关键词更合理的方式是用 and，但我这里先用 or 了，看起来显得多一点
      $or: [
        { prompt: { $in: regexArray } },
        { tag: { $in: regexArray } },
        { creator: { $in: userIds } }
      ]
    }).populate('creator') // populate 方法，自动关联 User 表，但是前提需要在表设计时使用
    // ref 指向你要关联的表

    return new Response(JSON.stringify(prompts), { status: 200 })
  } catch (error) {
    return new Response('Failed to fetch prompts', { status: 500 })
  }
}

后谈——优雅的封装

import { useState, useEffect } from 'react'

const useSearchPosts = (initialSearchText = '') => {
  const [searchText, setSearchText] = useState(initialSearchText)
  const [posts, setPosts] = useState([])
  const [timeoutId, setTimeoutId] = useState(null)

  // 获取所有 prompt
  const fetchPosts = async () => {
    const response = await fetch('/api/prompt')
    const data = await response.json()
    setPosts(data)
  }

  // 根据搜索关键词获取 prompt
  const fetchSearchPosts = async () => {
    const response = await fetch('/api/prompt/search?searchText=' + searchText)
    const data = await response.json()
    setPosts(data)
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  // 防抖
  useEffect(() => {
    if (searchText.trim()) {
      const newTimeout = setTimeout(() => {
        fetchSearchPosts()
      }, 1000)

      setTimeoutId(newTimeout)
      return () => clearTimeout(newTimeout)
    } else {
      fetchPosts()
      return () => clearTimeout(timeoutId)
    }
  }, [searchText])

  const handleSearchChange = e => {
    setSearchText(e.target.value)
  }

  const handleSubmit = e => {
    e.preventDefault()
    clearTimeout(timeoutId)
    fetchSearchPosts()
  }

  return {
    searchText,
    posts,
    fetchPosts,
    handleSearchChange,
    handleSubmit
  }
}

export default useSearchPosts

'use client'

import React, { useContext, useState, useEffect } from 'react'
import PromptCard from './PromptCard'
import basePathContext from '@/context/basePathContext'
import useSearchPosts from '@/hooks/useSearchPosts'

const PromptCardList = ({ data, handleTagClick }) => {
  return (
    <div className="mt-16 prompt_layout">
      {data.map(post => (
        <PromptCard key={post.id} post={post} handleTagClick={handleTagClick} />
      ))}
    </div>
  )
}

const Feed = ({ basePath }) => {
  const { searchText, posts, fetchPosts, handleSearchChange, handleSubmit } =
    useSearchPosts()

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <basePathContext.Provider value={basePath}>
      <section className="feed">
        <form className="relative w-full flex-center" onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="Search for a tag or username"
            value={searchText}
            onChange={handleSearchChange}
            required
            className="search_input peer"
          />
        </form>

        <PromptCardList data={posts} handleTagClick={() => {}} />
      </section>
    </basePathContext.Provider>
  )
}

export default Feed

总结

1. 防抖功能的实现

2. 搜索 api 的实现

3. 自定义 Hook 的封装与调用

前言

1. 使用nextconfig中的publicRuntimeConfig 来定义路径，相比于使用环境变量而言更优雅；

2. publicRuntimeConfig 只能在服务端组件中获取，但往往需要在客户端使用，如何解决该矛盾？

使用publicRuntimeConfig 定义子路径

/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === 'production'
const subBasePath = '/Promptopia'
const subAssetPrefix = subBasePath + '/'
const nextConfig = {
  basePath: isProd ? subBasePath : '',
  assetPrefix: isProd ? subAssetPrefix : '',
  publicRuntimeConfig: {
    basePath: isProd ? subBasePath : '',
    assetPrefix: isProd ? subAssetPrefix : ''
  },
  experimental: {
    serverComponentsExternalPackages: ['mongoose']
  },
  images: {
    domains: ['lh3.googleusercontent.com']
  }
}

export default nextConfig

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
const { basePath } = publicRuntimeConfig

解决该方法只能在服务端组件中使用的问题

• publicRuntimeConfig 只能在服务端调用，而 useContext 则正好相反，只能在客户端调用（本质上和 useState 一样，是 hook）

// Context/basePathContext.js
'use client'
import { createContext } from 'react'

const basePathContext = createContext('')
export default basePathContext

// app/page.jsx
import Feed from '@/components/Feed'
import React from 'react'
import getConfig from 'next/config'

const Home = () => {
  const { publicRuntimeConfig } = getConfig()
  const { basePath } = publicRuntimeConfig

  return (
    <section className="w-full flex-center flex-col">
    {//***}
      <Feed basePath={basePath} />
    {//***}
    </section>
  )
}

export default Home

// components/Feed.jsx
'use client'
import basePathContext from '@/context/basePathContext'

const Feed = ({ basePath }) => {
  return (
    <basePathContext.Provider value={basePath}>
      <PromptCard/>
    </basePathContext.Provider>
  )
}

export default Feed

// components/PromptCard.jsx
import React, { useContext, useState } from 'react'
import basePathContext from '@/context/basePathContext'

const basePath = useContext(basePathContext)

总结

Nobelium 主体部分

GitHub - MusherM/nobelium: Musher 的 Blog

Musher 的 Blog. Contribute to MusherM/nobelium development by creating an account on GitHub.

https://github.com/MusherM/nobelium

构建你的 notion 页

NOBELIUM Template | Notion

Built with Notion, the all-in-one connected workspace with publishing capabilities.

https://craigary.notion.site/ee99f65a23ab44f8ac80270122ee8138?v=6d187f15b9104d5598623622d42e6d02

1. 在复制过来的自己的 notion 仓库里，检查 share 设定，确保其设置为 Publish。

2. 获取你的 notionPageId（即图中[id].notion.site/后面，?v前面的部分）

3. 将其填入你 clone 下来的项目中的 blog.config.js 中的notionPageId 字段

4. 顺便完善其他相关字段，比如 author, title 等

阶段性检验

部署到 Github Page

子路径名称修改（如果你直接 fork 了我的 repo，可以跳过这部分）

如何知道你的 repo 叫什么名字？

从你的项目主页后面的名字就可以得知。

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  basePath: isProd ? "/nobelium" : "",
  assetPrefix: isProd ? "/nobelium/" : "",
  publicRuntimeConfig: {
    basePath: isProd ? "/nobelium" : "",
    assetPrefix: isProd ? "/nobelium/" : "",
  },
...

尽善尽美——完善你的博客数据分析系统和评论系统

数据分析

analytics: {
    provider: "ga", // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
    ackeeConfig: {
      tracker: "", // e.g 'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: "", // e.g https://ackee.craigary.net , don't end with a slash
      domainId: "", // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: "G-xxxxxxx", // e.g: G-XXXXXXXXXX
    },
  },

评论系统

1. 如果你的仓库是 fork 的，请先检查自己的仓库是否打开了 Issue，前往 Settings→General→Features 检查 Issue 是否打开，如果没有就打开它；

2. 确保你的仓库是 Public 状态，否则别人将无法访问你的 Issue；

3. 安装 Utterance App，至少允许它访问你用于部署博客的那个 repo。

4. 在blog.config.js 中修改如下内容

comment: {
    // support provider: gitalk, utterances, cusdis
    provider: "utterances", // 确保这里是utterances
    gitalkConfig: {
      repo: "", // 这里不用改
      owner: "",
      admin: [],
      clientID: "",
      clientSecret: "",
      distractionFreeMode: false,
    },
    utterancesConfig: {
      repo: "MusherM/nobelium",
// 这里填id/repo，比如我的 repo 写着MusherM/nobelium，那这里就填这个
// 如果你是 fork 的，应该只需要改前面的 id 就行
    },

后谈

静态资源访问

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  basePath: isProd ? "/nobelium" : "",
  assetPrefix: isProd ? "/nobelium/" : "",
  publicRuntimeConfig: {
    basePath: isProd ? "/nobelium" : "",
    assetPrefix: isProd ? "/nobelium/" : "",
  },

<link
    rel="preload"
    href="/fonts/SourceSerif.var.woff2"
    as="font"
    type="font/woff2"
    crossOrigin="anonymous"
  />

// 记得先引入
import { basePath } from "@/next.config";
<link
  rel="preload"
  href={basePath + "/fonts/SourceSerif.var.woff2"}
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

细枝末节

const NavBar = () => {
  const locale = useLocale();
  const links = [
    { id: 1, name: locale.NAV.ABOUT, to: "/about", show: BLOG.showAbout },
    {
      id: 2,
      name: locale.NAV.SURFING,
      to: "/tag/surfing",
      show: BLOG.showSurfing,
    },
    { id: 3, name: locale.NAV.SEARCH, to: "/search", show: true },
  ];

showAbout: false,
showSurfing: false,

引言

Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion

Learn how to build and deploy a modern developer portfolio with animations using Next.js. Perfect for showcasing your web development skills! ⭐ Hostinger - https://hostinger.com/mastery10 Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans. 🌟 Sentry - https://bit.ly/4abT6PG 🎨 Portfolio Figma Design - https://resource.jsmastery.pro/minimal-portfolio 📘 Portfolio Best Practices Guide - https://resource.jsmastery.pro/portfolio-best-practices 🤖 Special Discord Forum - https://resource.jsmastery.pro/portfolio-discord 🌟 Become a top 1% Next.js 14 developer: https://jsmastery.pro/next14 🚀 Skyrocket your career in 4 months: https://jsmastery.pro/masterclass 📚 Materials/References: GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/portfolio README (assets & code): https://github.com/adrianhajdin/portfolio/blob/main/README.md 💻 Join our Discord Community - https://discord.com/invite/n6EdbFJ 🐦 Follow us on Twitter: http://twitter.com/jsmasterypro 🖼️ Follow us on Instagram: http://instagram.com/javascriptmastery 💼 Business Inquiries: contact@jsmastery.pro Time Stamps 👇 00:00:00 — Intro 00:05:40 — Project Setup 00:14:48 — Hero Section 00:40:30 — Bento Grid 01:23:18 — Recent Projects 01:43:40 — Sentry 01:52:56 — Testimonials 02:06:00 — Work Experience 02:14:18 — My Approach Section 02:26:24 — Footer 02:35:13 — Fixing Bugs 02:39:19 — Deployment

https://www.youtube.com/watch?v=FTH6Dn3AyIQ&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR

1. 免费，真的良心

2. 本来这东西就是静态的，没什么后端服务，我想着给他渲染成纯静态页面丢上去不就完了呗

困境

Github Action 方式

Deploy from a branch 方式

静态资源路径问题

basePath

next.config.js Options: basePath

Use `basePath` to deploy a Next.js application under a sub-path of a domain.

https://nextjs.org/docs/app/api-reference/next-config-js/basePath

1. Links：当使用next/link和next/router 时，会自动添加basePath，也就是说<Link href="/about">About Page</Link> 会输出<a href="/docs/about">About Page</a> （basePath=’/docs’）

2. Image：当使用next/image 时，需要手动添加basePath，说白了就是不管你引用图片用的是<img>还是<Image> ，你通通需要手动把这个路径写完整

assetPrefix

next.config.js Options: assetPrefix

Learn how to use the assetPrefix config option to configure your CDN.

https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  basePath: "/Portofolio",
  assetPrefix: "/Portofolio/",
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

<img
  src={icon}
  alt={icon}
  className="p-2"
/>

<img
  src={
    process.env.NEXT_PUBLIC_ASSET_PREFIX + icon
  }
  alt={icon}
  className="p-2"
/>

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  basePath: "/Portofolio",
  assetPrefix: "/Portofolio/",
  images: {
    unoptimized: true,
  },
  env: {
    NEXT_PUBLIC_ASSET_PREFIX: "/Portofolio",
  },
};

export default nextConfig;

- name: Build with Next.js
  run: ${{ steps.detect-package-manager.outputs.runner }} next build
  # Add this
  env:
    NEXT_PUBLIC_ASSET_PREFIX: /Portofolio

后谈

/** @type {import('next').NextConfig} */
const isProd = process.env.NODE_ENV === "production";
const nextConfig = {
  output: "export",
  basePath: isProd ? "/Portofolio" : "",
  assetPrefix: isProd ? "/Portofolio/" : "",
  images: {
    unoptimized: true,
  },
  env: {
    NEXT_PUBLIC_ASSET_PREFIX: isProd ? "/Portofolio" : "",
  },
};

export default nextConfig;

<img 
	src={
    (process.env.NEXT_PUBLIC_ASSET_PREFIX || "") + "/profile.svg"
  }
  alt="profile"
/>

- name: Build with Next.js
  run: ${{ steps.detect-package-manager.outputs.runner }} next build
  env:
    NODE_ENV: production
    NEXT_PUBLIC_ASSET_PREFIX: /Portofolio

1. 在 Github Action 侧，我们通过 basePath assetPrefix NEXT_PUBLIC_ASSET_PREFIX 三兄弟，完成了对css js img 这些静态资源的路径补全；

2. 在本地 dev 侧，我们将这三兄弟全部设为空，从而保持原有的根路径访问

后后谈

next.config.js Options: images

Custom configuration for the next/image loader

https://nextjs.org/docs/app/api-reference/next-config-js/images

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

引言

Next.js 踩坑记（1）——路径体操

如何愉快的将你的 Nextjs 项目部署上 Github Page？

https://musherm.github.io/nobelium/path-middle

从 奇思乱想 到 妙想天开

打怪→获得经验→升级⤴️

https://emergencyexit.xyz/upgrade-blog

GitHub - craigary/nobelium: A static blog build on top of Notion and NextJS, deployed on Vercel.

A static blog build on top of Notion and NextJS, deployed on Vercel. - craigary/nobelium

https://github.com/craigary/nobelium

GitHub - IMBlues/nobelium: 布鲁斯鱼的妙想天开

布鲁斯鱼的妙想天开. Contribute to IMBlues/nobelium development by creating an account on GitHub.

https://github.com/IMBlues/nobelium

开始解决问题

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  basePath: isProd ? "/nobelium" : "",
  assetPrefix: isProd ? "/nobelium/" : "",
  webpack5: true,
  ...
};

- name: Build
  run: |
    npm i --registry https://registry.npmmirror.com --legacy-peer-deps -d 
    yarn build
    yarn export
  env:
    NODE_ENV: production

问题定位

./node_modules/gitalk/dist/gitalk.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/gitalk/dist/gitalk.css
Error: Cannot find module 'tailwindcss'
Require stack:
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack-config.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/cli/next-build.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/bin/next
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at mod._resolveFilename (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at loadPlugin (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:49:32)
    at /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:56
    at Array.map (<anonymous>)
    at Object.getPostCssPlugins (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:47)
    at async /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/index.js:99:36

{
  "name": "nobelium",
  "version": "1.3.0",
  "homepage": "https://nobelium.js.org",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/craigary/nobelium.git"
  },
  "author": {
    "name": "Craig Hart",
    "email": "i@craigary.net",
    "url": "http://craigary.net"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build && node ./.next/server/scripts/generate-rss.js",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap --config next-sitemap.config.js"
  },
  "dependencies": {
    "axios": ">=0.21.1",
    "feed": "^4.2.2",
    "gitalk": "^1.7.2",
    "next": "^12.1.0",
    "notion-client": "^4.10.0",
    "notion-utils": "^4.10.0",
    "preact": "^10.5.15",
    "react": "^17.0.2",
    "react-cusdis": "^2.0.1",
    "react-dom": "^17.0.2",
    "react-notion-x": "^4.11.0",
    "use-ackee": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "<8.0.0",
    "eslint-config-next": "^12.0.3",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-react": "^7.26.1",
    "next-sitemap": "^1.6.203",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  },
  "bugs": {
    "url": "https://github.com/craigary/nobelium/issues",
    "email": "i@craigary.net"
  }
}

总结