Next.js静态博客无法获取Markdown文章封面图求助

问题原因 #

Next.js App Router 默认仅将public目录下的文件作为静态资源对外暴露，你当前的contents目录不在public内，因此浏览器无法通过/contents/...的路径直接访问其中的图片。

解决方案一：将contents目录迁移到public下 #

这是最简单直接的方法，符合Next.js静态资源的默认规则：

1. 调整目录结构为：

my-blog
 -app
  -[slug]
   -page.js
 -public
  -contents
   -blogpost1
    -index.md
    -cover.png
   -blogpost2
    -index.md
    -cover.png

2. 修改page.js中读取Markdown文件的路径（文件现在位于public/contents下）：

const postDir = path.join(process.cwd(), 'public', 'contents', slug);
const fileContent = fs.readFileSync(path.join(postDir, 'index.md'), 'utf8');

3. 封面图的引用路径保持不变：<img src={/contents/${post.data.slug}/cover.png}/>，此时浏览器就能正常访问图片了。

解决方案二：在Server组件中读取图片转为Base64嵌入 #

如果不想移动contents目录，可以利用Next.js Server组件能直接读取本地文件的特性，将图片转为Base64后嵌入页面：

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export async function generateStaticParams() {
  const postsDir = path.join(process.cwd(), 'contents');
  const postFolders = fs.readdirSync(postsDir);
  return postFolders.map(folder => ({ slug: folder }));
}

export default async function PostPage({ params }) {
  const { slug } = params;
  const postDir = path.join(process.cwd(), 'contents', slug);
  
  // 读取Markdown内容
  const fileContent = fs.readFileSync(path.join(postDir, 'index.md'), 'utf8');
  const { data: post } = matter(fileContent);
  
  // 读取封面图并转为Base64
  const coverBuffer = fs.readFileSync(path.join(postDir, 'cover.png'));
  const coverBase64 = `data:image/png;base64,${coverBuffer.toString('base64')}`;

  return (
    <article>
      <h1>{post.title}</h1>
      <img src={coverBase64} alt={`${post.title} 的封面图`} />
      {/* 渲染Markdown内容的部分 */}
    </article>
  );
}

这种方法不需要依赖public目录，图片直接以Base64字符串的形式嵌入HTML中，适合需要保持现有目录结构的场景。

解决方案三：使用next/image组件并配置图片源（可选） #

如果需要利用Next.js的图片优化功能，可以使用next/image组件：

1. 首先在next.config.js中配置（结合方案一的目录结构）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: false, // 保持图片优化功能开启
  },
};

module.exports = nextConfig;

2. 在组件内使用next/image：

import Image from 'next/image';

// 组件内的渲染部分
<Image
  src={`/contents/${post.data.slug}/cover.png`}
  alt={`${post.title} 的封面图`}
  width={800}
  height={450}
  priority
/>

内容的提问来源于stack exchange，提问作者Eagle