If you already had the DSFR installed in your project, let's start from scratch:
Remove from your dependencies.
Remove the import ofdsfr.css, dsfr.module.js the favicon and the fonts.
Remove the data-fr-scheme (and data-fr-theme ) attribude from your <html/> tag
yarn add @codegouvfr/react-dsfr
npm install --save @codegouvfr/react-dsfr
pnpm add @codegouvfr/react-dsfr
And add this file to the root of your project, to enable pre & post scripts with pnpm:
.npmrc
enable-pre-post-scripts=true
When we say Yarn we usually refer to Yarn 1.x as most dev teams (Including me) havent upgraded to the newest version (for good reasons).
If you want to use Yarn Berry you be aware that pre- post- scripts aren't supported.
So you must do something like "dev": "copy-dsfr-to-public && next dev" (same thing for start)
Also you must configure it so it uses node_modules (sorry)
If you want a more complete starter with a Ready yo use stack that includes routing, autentication, internationalisation ect. you can also use this starter instead:
import { getHtmlAttributes, DsfrHead } from "../dsfr-bootstrap/server-only-index";
import { DsfrProvider } from "../dsfr-bootstrap";
export default function RootLayout({ children }: { children: React.JSX.Element; }) {
const lang = undefined; // Can be "fr" or "en" ...
return (
<html {...getHtmlAttributes({ lang })} >
<head>
<DsfrHead />
</head>
<body>
<DsfrProvider lang={lang}>
{children}
</DsfrProvider>
</body>
</html>
);
}
src/app/page.tsx
import { StartDsfrOnHydration } from "../dsfr-bootstrap";
export default function Page() {
return (
<>
{/* Important: You must mount this component on every pages of your App! */}
<StartDsfrOnHydration />
<h1>Welcome!</h1>
</>
);
}
You are in this case if you have a pages/ directory at the root of your project.
# If you plan to use MUI:
yarn add @mui/material @emotion/react @emotion/server @emotion/styled @mui/material @emotion/react
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: config => {
config.module.rules.push({
test: /\.woff2$/,
type: "asset/resource"
});
return config;
},
//This option requires Next 13.1 or newer, if you can't update you can use this plugin instead: https://github.com/martpie/next-transpile-modules
transpilePackages: [
"@codegouvfr/react-dsfr",
"tss-react" // This is for MUI or if you use htts://tss-react.dev
],
output: "export"
};
module.exports = nextConfig
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
startReactDsfr({ defaultColorScheme: "system" });
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
You're all set! Next step for you is to setup de integration with your routing library (react-router for example)
Avoiding or flash of unstyled text (FOUT)
You can avoid having a flash of unstyled text by preloading the font variant used on your homepage (look in the network tab of your browser dev tools what are the font downloaded initially).
