0

[postslug].js

import {PostData} from '../../data/postdata'


export async function getStaticProps({ params }) {
  const posts = PostData.find((p) => p.slug === params.postslug);

  return {
    props: {
      post: posts,
      
    },
  };
}

export async function getStaticPaths() {
  const paths = PostData.map((post) => ({
    params: { postslug: post.slug },
  }));

  return { paths, fallback: false };
}

  
const Post = ({post}) => {
    // const router = useRouter();
    // const slug = router.query.postslug;
    // const post = PostData.find((post1) => post1.slug === slug);

    return (
        <>
            {post.content}
        </>

    )
}

PostData.js

export const PostData = [
    {
        id: 1,
        slug: "article-blog",
        content: `<><main>

            <div className="postpage">
                <section className="article">


                <article>
                    <h2>Google Chrome</h2>
                    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
                </article>

                <article>
                    <h2>Mozilla Firefox</h2>
                    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
                </article>

                <article>
                    <h2>Microsoft Edge</h2>
                    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
                </article>

            </section>
        </div>
        </main></>`
    },
]

The code written in JSX Fragments is not rendering after fetching it. It is just displayed as it is written in an array of objects. Postdata.js file is containing an array of objects. I am trying to fetch the data of blog articles using getStaticProps and getStaticPaths.

Output Like: enter image description here

PRASHANT VERMA
  • 115
  • 1
  • 2
  • 9

2 Answers2

1

The first solution can be using dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{__html: post.content}} />

But as for the security problem, it will lead you to cross-site scripting (XSS) attack. So I'd propose you use html-react-parser that will help you to render a string as JSX safely.

import parse from 'html-react-parser';

const Post = ({post}) => {
    return (
        <>
            {parse(post.content)}
        </>

    )
}
Nick Vu
  • 14,512
  • 4
  • 21
  • 31
  • It's a nextjs project. Error: Module not found: Can't resolve 'html-react-parser' – PRASHANT VERMA Apr 03 '22 at 08:19
  • You need to run `npm install --save-prod html-react-parser` in your terminal for adding it to your project @PRASHANTVERMA – Nick Vu Apr 03 '22 at 08:20
  • Error: Error serializing `.post.content.$$typeof` returned from `getStaticProps` in "/blog/[postslug]". Reason: `symbol` cannot be serialized as JSON. Please only return JSON serializable data types. – PRASHANT VERMA Apr 03 '22 at 09:03
  • Hmm, it's weird, I just tested locally. This is the result I got https://ibb.co/G0F5223. You ran `npm run dev` or `npm run build`/`npm start`? – Nick Vu Apr 03 '22 at 11:47
  • Your mentioned link is not working – PRASHANT VERMA Apr 03 '22 at 13:50
  • You can check this sandbox https://codesandbox.io/s/static-site-generation-ssg-in-next-js-with-getstaticprops-forked-jvy0cb?file=/pages/post/%5Bpostslug%5D.js, the page URL can be https://jvy0cb.sse.codesandbox.io/post/article-blog @PRASHANTVERMA – Nick Vu Apr 03 '22 at 16:21
0

You have to use dangerouslySetInnerHTML in React, it is equivalent to seting innerHTML in vanilla JS refer this React.js: Set innerHTML vs dangerouslySetInnerHTML

Sanketh B. K
  • 759
  • 8
  • 22