Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using nextjs. I need to render custom landing pages according to their specific url. I am able to render all the details from the database of that particular URL except for the object which contains the details for the page. The pages has been built with the help of grapesjs. Following is the data I am getting from the db:
{
  _id: '6204ff7c494d63c93aed1f3b',
  name: 'demo1',
  url: 'demo1',
  createdAt: '2022-02-10T12:05:16.749Z',
  updatedAt: '2022-02-10T15:28:19.496Z',
  __v: 0,
  content: {
    'mycustom-html': '<div id="iuei">Insert your text here</div>',
    'mycustom-components': '[{"type":"text","attributes":{"id":"iuei"},"components":[{"type":"textnode","removable":false,"draggable":false,"highlightable":0,"copyable":false,"selectable":true,"content":"Insert your text here","_innertext":false}]}]',
    'mycustom-assets': '[]',
    'mycustom-css': '* { box-sizing: border-box; } body {margin: 0;}#iuei{padding:10px;}',       
    'mycustom-styles': '[{"selectors":["#iuei"],"style":{"padding":"10px"}}]'
  }
}


What I have tried:

Following is code for rendering the list of the pages: index.js
import Link from "next/link"
export const getStaticProps = async () => {
  const res = await fetch("http://localhost:5000/api/webpage/");
  const data = await res.json();
  return {
    props: {
      data,
    }
  };
};

const blog = ({ data }) => {
  return (
    <div>
      {data?.map((currentElement) => {
        return (
          <div key={currentElement.id} className="ssr-styles">
            <h3>
              {/* {currentElement._id} */}
              <Link href={`/blog/${currentElement.url}`}>
                {currentElement.name}
              </Link>
            </h3>
          </div> 
        );
      })}
    </div>
  );
};
export default blog;


Following is the code where the page is actually rendering: [pageno].js=>

export const getStaticPaths = async () => {
  const res = await fetch("http://localhost:5000/api/webpage/");
  const data = await res.json();
  const paths = data.map((currentElement) => {
    return {
      params: { pageno: currentElement.url.toString() }
    };
  });
  return {
    paths,
    fallback: false
  };
};
export const getStaticProps = async (context) => {
  const url = context.params.pageno;
  const res = await fetch(`http://localhost:5000/api/webpage/url/${url}`);
  const data = await res.json();
  return {
    props: {
      data
    }
  };
};

export const Details = ({ data }) => {
  return (
    <>
      <div key={data.url} className="ssr-styles">
        {data._id}
        <h3>{data.name}</h3>
      </div>
    </>
  );
};


how do I render the html inside the object content so as to get a proper webpage?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900