找不到模块：无法解析'fs'

我正在尝试使用最新的应用程序路由器制作下一个 js 13 mdx 博客网站 我收到此错误 => 找不到模块：无法解析“fs” 在下一个 js 12 和 pages 目录中它可以工作但是在最新的应用程序路由器中它不工作

这是我的代码，

"use client"

import Head from 'next/head';
import BlogSidebar from '../../components/blog/sidebar';
import Pagination from '../../components/blog/pagination';
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';
import { useRouter } from 'next/router'


export async function getStaticProps() {
  const blogsDirectory = join(process.cwd(), '_blog');
  const files = fs.readdirSync(blogsDirectory);

  let posts = files.map((fileName) => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = join(blogsDirectory, `${slug}.md`);
    const readFile = fs.readFileSync(fullPath, 'utf8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
      
    };
  });

  posts = posts.sort((job1, job2) => (job1.frontmatter.date > job2.frontmatter.date ? -1 : 1));

  return {
    props: {
      posts,
    },
    
  };
}


const page = ({ posts }) => {

  console.log(posts, "posts");

您发布的代码片段中有几个问题。

1. getStaticProps

   在 Next.js 13 应用路由器中不受支持。如果你尝试在

   app

   目录下的页面中使用它，你将得到以下错误：

app/ 不支持“getStaticProps”。阅读更多： https://nextjs/docs/app/building-your-application/data-fetching

你应该阅读上面提到的关于在 Next.js 13 应用程序路由器中获取数据的文档。

2. 您将您的页面声明为客户端组件，但期望它访问服务器端文件系统。这是行不通的。

您将需要重写代码以使其与

app

import fs from "fs";
import path from "path";

async function getPosts() {
  const files = fs.readdirSync(path.resolve("_blog"));

  // read posts

  return posts;
}

export default async function Home() {
  const posts = await getPosts();

  console.log(posts);

  // render posts
}