How to import a markdown file in NextJS

Question

So, I'm trying to display pure markdown in my NextJS Typescript page, I tried it:

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

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

export default Post1;

But I got it:

./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

I already created the markdown.d.ts file

Obs.: I don't want to convert md to jsx, just want to display it, I already did it in this gist

Possible duplicate of https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component — Sovari, Oct 04 '22 at 19:50
@Sovari no, a don't want to convert the markdown, just show it purely — Vitor Koch, Oct 04 '22 at 20:00
Possible duplicate of https://stackoverflow.com/questions/47954367/import-markdown-files-as-strings-in-next-js — Daniil Loban, Oct 04 '22 at 21:10

score 1 · Accepted Answer · answered Oct 04 '22 at 20:08

1

Oh now I get it. You could try this then:

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

answered Oct 04 '22 at 20:08

Sovari

141
5

https://imgur.com/LrkWMKM and same error – Vitor Koch Oct 04 '22 at 20:25
You'll probably need to incorporate a `markdown-loader` into your webpack config first https://www.npmjs.com/package/markdown-loader – Sovari Oct 04 '22 at 20:38
And here's how you extend your webpack config with an additional loader https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config – Sovari Oct 04 '22 at 20:40
TYYYYY I WANNA KISS YOU – Vitor Koch Oct 04 '22 at 20:58
I'm so happy it helped you! – Sovari Oct 05 '22 at 19:39

Ilya Iksent · Answer 2 · 2023-05-17T08:51:09.580

My approach:

Install markdown parsing library (react-markdown or other, I will use marked)
Place your markdown_file.md file in /public folder
Read file on the server /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),
        },
    };
}

How to import a markdown file in NextJS

2 Answers2