Nextjs causing hard refresh when i click in the Link

Asked By: Anonymous

I have an app react using CRA, and I am trying to turn it into an SSR app using next. So, since there is little, the only things I changed were:

  • getInitialProps instead of useEffect and useState
  • Link from “next / link” instead of using react router dom

But when I click on the link, I get hard refresh.
Here is what is generating the link:

<Link href={post.meta.slug}>
    <a>{post.title}</a>
</Link>;

I also tried with href={post.meta.slug} as={post.meta.slug}.

In my pages directory i have:

  • index.jsx
  • [slug].jsx

And this is how I get the post in [slug].jsx:

const PostPage = ({ post }) => {
    return <Base>{post ? <Post post={post} /> : null}</Base>;
};

PostPage.propTypes = {
    post: PropTypes.object,
};

PostPage.getInitialProps = async ({ query }) => {
    const post = await getPostBySlug(query.slug);
    return { post };
};

And so far I couldn’t identify the error.

Here is the complete code: https://gitlab.com/flakesrc/blog-webstation-next

If you want to clone:

git clone https://gitlab.com/flakesrc/blog-webstation-next.git
cd blog-webstation-next
npm install
npm run dev

Solution

Answered By: Anonymous

Have you tried this format for your Link?

<Link href='/[slug]' as={`/${post.meta.slug}`}>
  <a>{post.title}</a>
</Link>

Here is a good example of this type of routing for dynamic pages as well as the section in the docs that also speaks to this a bit.

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno