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