Nextjs causing hard refresh when i click in the Link

2
votes

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
1
reactjsnext.js

1 Answers

5
votes

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.