Dynamic blog in Homepage with Storyblok and NextJS

135 Views Asked by At

I have to create a dynamic blog with storyblok and next js to be placed on the home page. The code that renders the blog works, but I do not know how to structure the back-end on storyblok. If I create a "Home" folder, as the documentation says, it will not be rendered in home, but in "mysite.com/home and I don't want that. Can anyone help me?

This is the code for rendering all posts. I used 3 components: AllProjects (to render all posts), ProjectTeaser (for the UI of the posts in AllProjects) and Project for the individual post when opened

const AllProjects = ({ blok }) => {

const [projects, setProjects] = useState([]);

 useEffect(() => {
   const getProjects = async () => {
     const storyblokApi = getStoryblokApi();
     const { data } = await storyblokApi.get(`cdn/stories`, {
       version: "draft", // or 'published'
       starts_with: "",
       is_startpage: false
     });

  setProjects((prev) => data.stories.map((project) => {
    console.log(project.content.slug)
    project.content.slug = project.slug;
    return project;
  }));
};
getProjects();
}, []);

return (
  <>
    <div {...storyblokEditable(blok)}>
      {projects[0] && projects.map((project) => (
        <ProjectTeaser project={project.content} key={project.uuid} />
      ))}
    </div>
  </>
 );
};
0

There are 0 best solutions below