Answer the question
In order to leave comments, you need to log in
Is it possible to make dynamic routing in next with static export?
Good evening. Tell me how can I make dynamic routing with static export in next?
Now I have a MainNews component with all the news and links to the news in more detail.
Links lead to a dynamic page along the path /news/[current].js its path is generated from the name of the news in ${encodeURIComponent(data.fields.slug)}
const MainNews = () => {
useEffect(() => {
//...code
}, [])
return (
<div className="main__news-items">
{data.map((data, idx) => (
<Link key={idx} href={`/news/${encodeURIComponent(data.fields.slug)}`}>
<a>
читать новость
</a>
</Link>
))}
</div>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
const newsEntries = await client.getEntries({
content_type: 'news',
select: 'fields.slug'
})
return {
paths: newsEntries.items.map((item:any) => {
// console.log(projects)
return {
params: {
news: item?.fields?.slug
}
}
}),
fallback:false
}
}
export const getStaticProps: GetStaticProps = async ({params}) => {
const slug = params!.news!;
const newsEntries = await client.getEntries({
content_type: 'projects',
limit: 1,
'fields.slug': slug
})
const [news] = newsEntries.items
return {
props: {
news
}
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question