next-tabs Persistent route pages in Next.js

Description

• In Next.js, layouts automatically persist state across route changes.
• However, the client state for pages are reset on each navigation.
• This demo showcases how to maintain state across different routes using parallel routes.

Instructions

1. Click on the tabs above to navigate between the different routes
2. The counters on each page will start once you navigate to the page
3. Notice that all counters (not just layout counters) continue to increment even as you switch tabs
4. This also works with switching tabs via the browser back and forward buttons

You will notice that Home and Tab C reset each other as you click back and forth between them. This is because they share the same slot, children. To truly have full tab-like behavior, each tab should have its own unique slot.

Tab D is an example of a tab that does not have a slot, but still has access to the counters context. Because of context, even though it shares same slot as Tab C, and as Home, the counter still does not reset when switching between them.