所以,我只是在练习Next.js 13.4新的实验性应用程序功能与React服务器组件。长话短说,我有一个程序,它chnages一个markdown文件的博客文章,我这样做的节点js和灰色物质的阅读文件。
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
const postsdir = path.join(process.cwd(),'src','data','Posts')
async function getPostData(filename) {
const filePath = path.join(postsdir, filename)
const postInfo = fs.readFileSync(filePath, 'utf-8')
const postSlugName = filename.replace(/\.md$/,'')
const { data, content } = matter(postInfo)
const PostData = {
slug: postSlugName,
data: data,
content:content
}
return PostData
}
export async function getAllPosts() {
const Posts = fs.readdirSync(postsdir)
const AllPostsData = await Promise.all(Posts.map(async (post) => {
return await getPostData(post)
}))
return AllPostsData.sort((postA, postB) => postA.date > postB.date ? -1 : 1)
}
export async function getFeaturedPosts(){
const allPosts = await getAllPosts()
const featuredPosts = allPosts.filter(post => post.data.isFeatured === true)
return featuredPosts
}
我知道nde js不能在客户端使用,所以要调用函数来获取帖子,我需要一个服务器组件,这就是js 13.4的下一个新功能。所以我有一个API路由处理程序来获取包含在markdown文件头中的布尔值(isFeatured)..
import { getFeaturedPosts } from "@/lib/PostsGateway";
import { NextResponse } from "next/server";
export async function GET() {
console.log('get method run')
const featuredPosts = await getFeaturedPosts()
console.log(featuredPosts)
return NextResponse.json(featuredPosts)
}
这只是一个简单的API路由处理程序,用于从fetch.它位于src/app/API/featuredPosts中。则调用get函数的方式是通过进行默认的获取请求,该获取请求是get请求。
import Hero from "@/components/Home/Hero"
import FeaturedPosts from "@/components/Home/featuredPosts";
import { getFeaturedPosts } from "@/lib/PostsGateway";
async function getData() {
"use server"
const fPosts = await fetch('http://localhost/api/featuredPosts')
return fPosts
}
export default async function HomePage() {
const featuredPosts = await getData()
console.log(featuredPosts)
return (
<>
<Hero />
<FeaturedPosts posts={featuredPosts} />
</>
)
}
我想获取markdown文件信息,它是通过getData()函数中的fetch函数获取的,getData()函数是一个服务器组件,使用fetch default函数,它应该调用API/festuredPosts route.js > GET()函数中的get函数,但我没有调用,错误说:无法获取,我不知道,我在前几天使用过它,但这是与客户端组件现在,这是一个小博客的做法,没有必要使它成为一个客户端,我使用的节点js不能在客户端运行。
我试图得到一个标记文件中的一个对象与蛞蝓,数据和内容,这是由从灰色物质的问题,但错误弹出与feiled获取,当我使用获取(“/API/featuredPosts”),然后它说,它不能解析的URL从“API/featuredPosts”,但我认为的方式来调用API路由处理程序是这样的,但在应用程序中,我写了“http:localhost/API/featuredPosts”冰艾说,但再次没有.. plz看看是否有一些worng与我的代码和给予建议,谢谢
1条答案
按热度按时间ifmq2ha21#
由于您已经在服务器组件上,并且不需要调用API,因此可以直接在
HomePage
组件中执行const featuredPosts = await getFeaturedPosts()
,如下所示: