I’m in the process of learning more about NextJs and more particularly about client / server components.
I’ve understood that you have to separate the two to get the best possible SEO rendering, and to optimize the app as much as possible it’s recommended to use client components only when you need them, which makes sense.
But this implies putting component clients deep in the application tree, if I understand correctly. However, to use certain major and important functionalities, you have to use providers (for translation, using reactQuery etc…).
These providers have to wrap the application almost entirely and are therefore at the very top of the tree, but they are component clients.
My question is, if you follow the documentation, you’ll see that each child of a client component is itself a client component.
So how do you get an optimized application that allows you to correctly place server components with client components?
ps: I apologize if I’m asking a question that’s already been answered by an obvious topic, but I haven’t found anything satisfactory on the subject.
For exemple here is my react next.js app router code:
the root layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { I18nProviderClient } from '~/core/locales/client';
import { ReactElement } from 'react';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
params: { locale },
children,
}: {
params: { locale: string };
children: ReactElement;
}) {
return (
<html lang={'en'} className={'h-full bg-white'}>
<body className={`h-full ${inter.className}`}>
<I18nProviderClient locale={locale}>{children}</I18nProviderClient>
</body>
</html>
);
}
here the code of i18n next-international provider:
"use client"
import { createI18nClient } from 'next-international/client'
export const { useI18n, useScopedI18n, I18nProviderClient, useChangeLocale, useCurrentLocale } = createI18nClient({
en: () => import('./en'),
fr: () => import('./fr')
})
and here a random page code:
'use client';
import { useState } from 'react';
import SidePanel from '~/component/SidePanel';
import TopBar from '~/component/TopBar';
export default async function DevZone() {
const [sidePanelOpen, setSidePanelOpen] = useState(false);
return (
<div>
<SidePanel
setSidePanelOpen={setSidePanelOpen}
sidePanelOpen={sidePanelOpen}
/>
<TopBar
setSidePanelOpen={setSidePanelOpen}
sidePanelOpen={sidePanelOpen}
/>
</div>
);
}
This code is working, but if i remove the 'use client' mention, then an error occur saying i must set this code as a client component, but this is the children of the layout, and then it should already be a client component where i should be able to use client feature like said in the documentation.
But it does not work like this, i am wrong and i don’t know why.
Kévin Bidet is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.