Implementing Tabs | Next.js | Page 1

Hi @acoustic elbow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To implement tabs in Next.js while efficiently handling common data and routing, you can use a combination of parallel routes and client-side navigation. This approach allows you to load common data once and switch between tabs without reloading the entire page. Here's how you can implement this:

Create a layout for your library page:

// app/library/layout.tsx
export default function LibraryLayout({ children, posts, drafts }) {
  return (
    <div>
      {/* Common data loading and layout structure */}
      {children}
    </div>
  );
}

Use parallel routes for your tabs:

// app/library/page.tsx
export default function LibraryPage({ posts, drafts }) {
  return <>{posts}</>; // Default to posts tab
}

// app/library/@posts/page.tsx
export default function PostsTab() {
  // Posts tab content
}

// app/library/@drafts/page.tsx
export default function DraftsTab() {
  // Drafts tab content
}

Implement client-side navigation using next/link:

// app/library/layout.tsx
import Link from 'next/link';

export default function LibraryLayout({ children, posts, drafts }) {
  return (
    <div>
      <nav>
        <Link href="/library">Posts</Link>
        <Link href="/library/drafts">Drafts</Link>
      </nav>
      {children}
    </div>
  );
}

This setup allows you to load common data in the layout and use parallel routes for your tabs. The Link component enables client-side navigation between tabs without reloading the entire page Linking and Navigating (https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating).

#Implementing Tabs