studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨(app-desk) remove warning next.js about css from Head

Browse Source 
Importing the css from Head was causing a flickering
effect on the button, because of the time the css
load. Next.js was emitting as well a warning about
css being loaded from the Head component.
We moved the css import to the _document.tsx file
as recommended by the Next.js documentation.
This commit is contained in:
Anthony LC
2024-03-29 11:49:32 +01:00
committed by Anthony LC
parent e7049632ab
commit 6d8e05b746
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx
View File

@@ -1,4 +1,3 @@
import Head from 'next/head';
import Script from 'next/script'; import Script from 'next/script';
import React from 'react'; import React from 'react';
@@ -12,15 +11,13 @@ import React from 'react';
* This PoC has been created by @manuhabitela. * This PoC has been created by @manuhabitela.
* *
* It includes external CSS and JavaScript files for styling and functionality. * It includes external CSS and JavaScript files for styling and functionality.
*
* Style has to be included as well: https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css \
* To respect next.js standards, the css is included using the `_document.ts` component.
* @see https://github.com/numerique-gouv/people/blob/main/src/frontend/apps/desk/src/pages/_document.tsx#L8
*/ */
export const ApplicationsMenu = () => ( export const ApplicationsMenu = () => (
<> <>
<Head>
<link
rel="stylesheet"
href="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css"
/>
</Head>
<Script <Script
src="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/widget.js" src="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/widget.js"
strategy="lazyOnload" strategy="lazyOnload"

13
src/frontend/apps/desk/src/pages/_document.tsx
View File

@@ -2,10 +2,21 @@ import { Head, Html, Main, NextScript } from 'next/document';
import '@/i18n/initI18n'; import '@/i18n/initI18n';
/**
* About the Gaufre Vanilla CSS
* To respect next.js standards, the css is included here.
* This css is used with features/header/ApplicationsMenu component.
* If the ApplicationsMenu component is removed, this css can be removed as well.
*/
export default function RootLayout() { export default function RootLayout() {
return ( return (
<Html lang="en"> <Html lang="en">
<Head /> <Head>
<link
rel="stylesheet"
href="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css"
/>
</Head>
<body suppressHydrationWarning={process.env.NODE_ENV === 'development'}> <body suppressHydrationWarning={process.env.NODE_ENV === 'development'}>
<Main /> <Main />
<NextScript /> <NextScript />