我试图使下一个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");
2条答案
按热度按时间dy1byipe1#
在你发布的代码片段中有几个问题。
getStaticProps
在Next.js 13应用路由器中不受支持。如果您尝试在app
目录下的页面中使用它,您将获得以下错误:app/中不支持“getStaticProps”。阅读更多:https://nextjs.org/docs/app/building-your-application/data-fetching
你应该阅读上面提到的关于Next.js 13应用路由器中数据获取的文档。
1.您将页声明为客户端组件,但希望它访问服务器端文件系统。这样下去是行不通的。
您需要重写代码,使其与
app
目录兼容。下面是你如何解决这个问题:下面的迁移指南也会有所帮助。
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
t5fffqht2#
fs模块在客户端不可用。您可以使用next/dynamic组件在服务器端加载文件内容,然后在客户端呈现它们。
下面是更新后的代码:
这段代码将首先在服务器端加载文章列表。然后,它将呈现查询字符串中指定的帖子。如果查询字符串中没有指定post,它将呈现列表中的第一个post。