Ad

Why Go Back Button Doesn't Trigger Client Side Navigation In Next.js App?

I have a simple Next.js application that uses GraphQL to load articles from a server. Dynamic routing works perfectly fine unless you reload the page while you are on some article and want to go back.

A typical situation is completely fine

Index -> [slug] -> go back (Index)

But the issue is in this situation

[slug] -> go back(Index)

The page won't trigger rerender and while the url is pointing to Index, content on the page stays the same.

I've checked if my Link components are written correctly and they are.

This a component on Index page that contains link to redirect

const Index: FunctionComponent<IArticlePreviewProps> = (props) => {
    const { article }: { article: IArticlePreviewData } = props;

    return (
        <Link target="_blank" rel="nofollow noreferrer" href="/articles/[slug]" as={`/articles/${article.slug}`}>
            <a>
                <img src={article.thumbnail} alt=""/>
            </a>
        </Link>

    )
}

And this is a component which is dynamic and shows article content

const Article: NextPage = (props) => {
    const router = useRouter();

    const { loading, data, error } = useQuery<IArticleQueryData>(ARTICLE_QUERY, {
        variables: { id: router.query.slug }
    });

    if (loading) {
        return null;
    }

    const article = data!.Article;

    return (
        <>
            <div className="d-flex justify-content center">
                <div className="container">
                    <div className="article">
                        <div className="article__header d-flex">
                            <div className="col-8 p-0 article__header-thumbnail">
                                <img src={article.thumbnail} alt=""/>
                            </div>
                            <div className="col-4 p-4 article__header-title d-flex flex-column justify-content-end">
                                <h1>{article.title}</h1>
                                <time className="article-date" dateTime={article.createdAt}>
                                    {getArticlePreviewDate(article.createdAt)}
                                </time>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}
Ad

Answer

It was just a bug in Next.js. It's already fixed.

Ad
source: stackoverflow.com
Ad