Previously I had a custom _app.tsx that did some bootstrapping for my application:
useEffect(() => void defineCustomElements(), []); It loaded custom elements/web ponents and made sure they can be hydrated.
Where should I put this effect now with the app router that 1. doesn't have a "global" _app.tsx and secondly is "server ponent first"?
Previously I had a custom _app.tsx that did some bootstrapping for my application:
useEffect(() => void defineCustomElements(), []); It loaded custom elements/web ponents and made sure they can be hydrated.
Where should I put this effect now with the app router that 1. doesn't have a "global" _app.tsx and secondly is "server ponent first"?
1 Answer
Reset to default 13On the Upgrade Guide page, they say "pages/_app.js and pages/_document.js have been replaced with a single app/layout.js root layout".
In your case where you need client interactions in the layout, you could do as below, for example, using a separate client ponent that you import in the layout:
// DefineCustomElements.js
"use client";
export default function DefineCustomElements() {
useEffect(() => defineCustomElements(), []);
return <></>;
}
// app/layout.js
import DefineCustomElements from "./DefineCustomElements";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<DefineCustomElements />
{children}
</body>
</html>
);
}