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 stackoverflow.com/questions/42928530/… — Sovari
– Sovari, Commented Oct 4, 2022 at 19:50
@Sovari no, a don't want to convert the markdown, just show it purely — Vitor Koch
– Vitor Koch, Commented Oct 4, 2022 at 20:00
if you needn't format md file, just use <pre>{markdown}</pre> — Daniil Loban
– Daniil Loban, Commented Oct 4, 2022 at 20:08
Possible duplicate of stackoverflow.com/questions/47954367/… — Daniil Loban
– Daniil Loban, Commented Oct 4, 2022 at 21:10

Sovari · Accepted Answer · 2022-10-04 20:08:32Z

3

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

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

answered Oct 4, 2022 at 20:08

Sovari

1615 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vitor Koch Over a year ago

imgur.com/LrkWMKM and same error

Sovari Over a year ago

You'll probably need to incorporate a markdown-loader into your webpack config first npmjs.com/package/markdown-loader

Sovari Over a year ago

And here's how you extend your webpack config with an additional loader nextjs.org/docs/api-reference/next.config.js/…

Vitor Koch Over a year ago

TYYYYY I WANNA KISS YOU

Sovari Over a year ago

I'm so happy it helped you!

Ilya Iksent · Accepted Answer · 2023-05-17 08:51:09Z

2

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),
        },
    };
}

edited May 17, 2023 at 8:51

answered Apr 27, 2023 at 17:06

Ilya Iksent

1,83822 silver badges18 bronze badges

1 Comment

G Herbowicz Over a year ago

const { join } = require('path'); const fs = require('fs');

Collectives™ on Stack Overflow

How to import a markdown file in NextJS

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related