Какой основной (глобальный) файл для useEffect для всех страниц? Раньше в Next.js вы могли использовать useEffect в _app.tsx, и это влияло на все страницы. Пример:
const MyApp = ({ Component, pageProps }: AppProps) => {
useEffect(() => {
console.info("Hello!")
)}
return (
<>
<Head>
<title>Title</title>
</Head>
</>
);
};
И на всех страницах можно было увидеть console.info. Теперь, используя Next.js с каталогом app, в каком файле вы можете использовать глобальный useEffect? Потому что вы не можете использовать useEffect в файлах сервера, например, в layout.tsx.
🤔 А знаете ли вы, что...
React поддерживает локализацию и мультиязычность.
Как вы можете прочитать в Руководстве по обновлению, pages/_app.js и pages/_document.js были заменены одним корневым макетом app/layout.js.
Таким образом, вы можете поместить свой useEffect в app/layout.js и сделать его клиентским компонентом с "use client" вверху (зная, что это не помешает другим частям приложения быть серверными компонентами):
// app/layout.js
"use client";
export default function RootLayout({ children }) {
useEffect(() => {
console.info("Hello!")
}, []);
return (
<html lang = "en">
<body>
{children}
</body>
</html>
);
}
Но скажем, вы не хотите, чтобы ваш корневой макет был клиентским компонентом, вы можете сделать, как показано ниже, например, используя отдельный компонент:
// SomeGlobalComponent.js
"use client";
export default function SomeGlobalComponent() {
useEffect(() => {
console.info("Hello!")
}, []);
return <></>;
}
// app/layout.js
import SomeGlobalComponent from "./SomeGlobalComponent";
export default function RootLayout({ children }) {
return (
<html lang = "en">
<body>
<SomeGlobalComponent />
{children}
</body>
</html>
);
}