page 라우터를 app라우터로 변경하는 과정에서, creatContext를 사용하여 만든 Provider component를 사용하려면 csr방식으로 변경을 해야했습니다..
그래서 "use client"를 작성하여 변경했더니.. metadata를 export 를 할수 없다고 에러가 났었습니다.ㅠㅠ
[에러]
[원인]
AuthProvide의 파일 안에 hook(useState, useEffect등등)을 사용해야하기에.. csr방식으로 변경해야했다,
많은 타사에서 "use client"라는 지시어를 포함하지 않고 있기 때문에, 서버 컴포넌트에서는 사용하기가 어럽다고 한다.
해결하려면 자체 클라이언트 구성 요소에서 클라이언트 전용 기능을 사용하는 타사 구성 요소를 래핑하면 됩니다.
이렇게 공식문서에 설명이 되어있다.
그래서 그대로 따라 했더니 에러가 사라졌다~
우선 아래 코드는 rootlayout파일, rootlayout에 App페이지, App에 AuthProvider페이지 까지 의 코드를 올려 보겠습니다.
// root Layout.tsx
import { Metadata } from 'next';
import App from './App';
import '@/styles/globals.css';
export const metadata: Metadata = {
title: 'linkvrary',
description: '원하는 폴더를 관리해요',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='ko'>
<body>
<App>{children}</App>
</body>
</html>
);
}
// app.tsx
export default function App({ Component, pageProps }: AppProps) {
return (
<AuthProvider>
<Wrap>
<Header />
<Component {...pageProps} />
<Footer />
</Wrap>
</AuthProvider>
);
}
// AuthProvider(auto.provider.tsx)
'use client'; => useState,useEffect 사용으로 추가해야함
import React, { createContext, useEffect, useState } from 'react';
...
export default function AuthProvider({ children }: { children: React.ReactNode }) {
const [isLoggedIn, setIsLoggedIn] = useState<login>();
...
useEffect(() => {
...
}, []);
return <AuthContext.Provider value={{ isLoggedIn, handleLogin, handleLogout }}>{children}</AuthContext.Provider>;
}
[해결]
아주 쉽게 해결했다. 뭐가 문제 인지 몰라서 공식문서를 읽는게 시간이 걸렸지.. 해결은 오래 걸리지 않았다
- provider를 하나 새로 만든다. 그리고 거기에 AuthProvider를 연결한다.
// ThemeProvider (theme.provider.tsx)
'use client';
export const ThemeContext = createContext({});
export default function ThemeProvider({ children }: { children: React.ReactNode }) {
return (
<ThemeContext.Provider value='dark'>
<AuthProvider>
<Wrap>
<Header />
{children}
<Footer />
</Wrap>
</AuthProvider>
</ThemeContext.Provider>
);
}
2. root layout.tsx에 연결한다~
import '@/styles/globals.css';
import { Metadata } from 'next';
import ThemeProvider from '@/lib/theme.provider';
export const metadata: Metadata = {
title: 'Link',
description: '원하는 폴더를 관리해요',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='ko'>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
'[노트장] 적으며 정리해 보는 이론 > Next Js' 카테고리의 다른 글
| [Next.js] Error: Unexpected token 'I', "Internal S"... is not valid JSON (0) | 2024.05.25 |
|---|---|
| [Next.js][redirect 에러] 리디렉션한 횟수가 너무 많습니다. (0) | 2024.05.18 |
| [Next.js] Environment Variables (0) | 2024.05.15 |
| [랜더링] CSR & SSR & SSG (0) | 2024.05.09 |
| [Next.js] Next.js란 (0) | 2024.05.08 |
