RakaDoank

I really want to show top-bar-ish animation in my web when client is requesting a new page by clicking a link or programatically router.push or router.replace, but Next.js dev decided to remove the router events in Next.js 13.

So, i ended up by listening to the document click event. It's inspired by nextjs-toploader, but it only works for next/link component, not programmatically like router.push and router.replace

Better than nothing. I created a my own react context for the top-bar loader, and also have functions to programatically start and stop

The idea of the document click event is listening to the document click and detect if the anchor element (next/link component) has been clicked.

'use client'

RakaDoank

Are you having a trouble about SEO Meta in server while your project is SPA only like React Router or Vue Router?

Can i guess you also don't have so much time for migration on the new framework that can handle server side rendering out of the box like Next.js, Nuxt.js, Gatsby, etc.

Setting the SEO meta in server like <title>, <meta name="description"/> are actually useful for search engine, and also good for showing your summary content in social media app by pasted the full url in Whatsapp, IG, Twitter, etc.

Enough the intermezzo, here we go.

The concept is actually simple, modify the index.html (from bundled source) before it served to the client.

RakaDoank

How do i configure Redux in Next.js

Since the latest Next.js with App Router now, it actually easier to configure it, but i just want to share my code that is stable on production, how do i configure Redux in Next.js, including for Pages Router.

I want to remind you, i just want to share the code, not really like a documentation-ish.

This configure of Redux is using

• React Redux
• Redux Toolkit
• Redux Persist (LocalStorage)