Looking to create a basic website that displays content from a database? Utilizing the getInitialProps function from Next.js documentation can help with server-side rendering: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialprops-for-older-versions-of-nextjs
Currently, things are functioning smoothly, but now I want to enhance the functionality by enabling access to specific articles based on their ID. The desired URL structure is as follows:
http://localhost:3000/articles/<some_id>
I've managed to set this up, but the next step involves extracting the ID from the query parameter and passing it to the getInitialProps function in order to fetch only that particular article from the API. The challenge lies in figuring out how to pass down the router props for accessing the ID and making the API call.
import { withRouter } from "next/router";
import fetch from "isomorphic-unfetch";
const Article = ({ router }) => {
console.log(router);
return (
<div>
<h1>Hello World</h1>
</div>
);
};
Article.getInitialProps = async props => {
console.log(props);
const res = await fetch(
`https://admin.jozefrzadkosz-portfolio.pl/articles/${router.query.id}`
);
const articles = await res.json();
return { articles };
};
export default withRouter(Article);