Next.js is an open-source React front-end development web framework, that enables functionality such as server-side rendering and generating static websites for React-based web applications.
Regarding Next.js, server-side rendering will not work with the CMP as it heavily requires localstorage to work properly and the CMP does not support server-side rendering.
As simply adding our script shouldn't interfere with the app's server-side rendering logic this simple approach should in principle work. Basically, depending on what the you are trying to achieve, if your app does not need to render the CMP server-side, you can just add the script(s) in the next.js config file and this should work just fine.
Another strategy is to use the Script element in the head element in the layout.tsx file., for instance for V3 you could do (replacing XXXXXXX with your settingsId):
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<Script src="https://web.cmp.usercentrics.eu/ui/loader.js"
strategy="beforeInteractive"
id="usercentrics-cmp"
data-settings-id="XXXXXXXX"
async
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}