Setting up PrimeReact in a Next.js project.
Install PrimeReact and a theme package using your favorite package manager:
npm install [email protected] @primeuix/themes
Create a prime-ssr-provider.tsx file in the root of your project and add the following code:
'use client';
import { PrimeReactProvider, PrimeReactStyleSheet } from '@primereact/core';
import { useServerInsertedHTML } from 'next/navigation';
import * as React from 'react';
import Aura from '@primeuix/themes/aura';
const styledStyleSheet = new PrimeReactStyleSheet();
export default function PrimeSSRProvider({
children
}: Readonly<{
children?: React.ReactNode;
}>) {
useServerInsertedHTML(() => {
const styleElements = styledStyleSheet.getAllElements();
styledStyleSheet.clear();
return <>{styleElements}</>;
});
const primereact = {
theme: {
preset: Aura
}
};
return (
<PrimeReactProvider {...primereact} stylesheet={styledStyleSheet}>
{children}
</PrimeReactProvider>
);
}Import the PrimeSSRProvider in your root layout.tsx file and wrap your app with it.
...
import PrimeSSRProvider from './prime-ssr-provider';
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<PrimeSSRProvider>{children}</PrimeSSRProvider>
</body>
</html>
);
}To verify that PrimeReact is installed correctly, you can create a simple component such as Button and render it in your application. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
import { Button } from 'primereact/button';
export default function VerifyInstallation() {
return (
<div className="card flex justify-center">
<Button>Verify</Button>
</div>
);
}If you encounter issues during installation or setup, check the following:
PrimeReactProvider is properly wrapped around your application.