找不到模块:无法解析'fs'"/>
找不到模块:无法解析'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");
回答如下:
您发布的代码片段中有几个问题。
在 Next.js 13 应用路由器中不受支持。如果你尝试在getStaticProps
目录下的页面中使用它,你将得到以下错误:app
app/ 不支持“getStaticProps”。阅读更多: https://nextjs/docs/app/building-your-application/data-fetching
你应该阅读上面提到的关于在 Next.js 13 应用程序路由器中获取数据的文档。
- 您将您的页面声明为客户端组件,但期望它访问服务器端文件系统。这是行不通的。
您将需要重写代码以使其与
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
}
更多推荐
找不到模块:无法解析'fs'
发布评论