Best practices for integrating next.js 14 with frontend libraries like emotion and react-query?

by

Seeking advice on configuring providers and managing conflicts with the ‘use client’ approach while integrating next.js 14 with frontend libraries like emotion and react-query. When creating a provider, it’s crucial to include “use client,” but I’m concerned that placing it in the parent component might transform all child components into client components, potentially hindering the global usage of server components (a key feature in next.js 14).

Curious to learn about others’ approaches and if there are flaws in my reasoning. Your valuable feedback is appreciated.

I will attach the example code I described below

src/providers/TanstackProvider.tsx

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // ver.^5.14.1
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';
import { ReactNode } from 'react';

const TanstackProvider = ({ children }: { children: ReactNode }) => {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default TanstackProvider;

src/app/layout.tsx

'use client';
// import...

 export const metadata: Metadata = {
...
 };

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <html lang="en">
      <body>
        <RootStyleRegistry>
          <TanstackProvider>
             <Global styles={globalStyle} />
            <Header />
            <div> {children}</div>
          </TanstackProvider>
        </RootStyleRegistry>
      </body>
    </html>
  );
}

Leave a Comment