reactjs - Hur man importerar en markdown-fil i NextJS

Så, jag försöker visa ren markdown på min NextJS Typescript-sida, jag försökte det:

import React, { useState, useEffect } from "react";
import markdown from "./assets/1.md";

const Post1 = () => {
  return <>{markdown}</>;
};

export default Post1;

Men jag förstod det:

./pages/blog/assets/1.md
Module parse failed: Unexpected character ' ' (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # Apresentations
| 
| Hi, my name is Vitor Koch

Jag har redan skapat filen markdown.d.ts

Obs.: Jag vill inte konvertera md till jsx, vill bara visa det, jag har redan gjort det i detta gist

Svar #1

Åh, nu förstår jag. Du kan prova detta då:

return <>{JSON.stringify(markdown, 2, null)}</>;

Svar #2

Mitt tillvägagångssätt:

  1. Installera bibliotek för markdown-parsing (react-markdown eller annat, jag kommer att använda marked)

  2. Placera din markdown_file.md-fil i /public-mappen

  3. Läs filen på servern /pages/your_page.tsx:

import React from 'react';
import { marked } from 'marked';

export default function YourPage(props: { html: string }) {
    const { html } = props;
    return (
        <div>
            <span dangerouslySetInnerHTML={{ __html: html }} />
        </div>
    );
}

const filePath = join(process.cwd(), 'public', 'markdown_file.md');

export async function getStaticProps() {
    const fileContent = fs.readFileSync(filePath, 'utf8');
    return {
        props: {
            html: marked.parse(fileContent),
        },
    };
}

Relaterade artiklar