Next.js Discord

Discord Forum

markdown

Unanswered
Horse guard wasp posted this in #help-forum
Open in Discord
Horse guard waspOP
How can i fetch local markdown files on the client with AppRouter.

2 Replies

Use server components, and give as a prop to client component
MarkdownProvider.tsx

// This provider is a litte different with other client side context providers.
// It does not provide context, but provides Markdown file content to children

import fs from "fs/promises";
import path from "path";

import MarkdownClient from "./MarkdownClient"

export default async function MarkdownProvider() {
  const filePath = path.join(process.cwd(), "data/main.md"); // This path will depend on your configuration
  const fileData = await fs.read(filePath, "utf-8");

  return <MarkdownClient content={fileData} />
}


MarkdownClient.tsx
// This component can be a client component
"use client"

export default function MarkdownClient {
  // Do whatever you want
}