[Next.js] Custom App Component

• Component : 렌더링하길 원하는 페이지

• pageProps : 넘겨줄 props

ex) 모든 페이지에서 공통으로 사용하는 NavBar 컴포넌트

import NavBar from '@/components/NavBar';

export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

styles/globals.css 파일은 Custom App 에서만 import 가능

참고

Advanced Features: Custom `App` | Next.js

Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.

https://nextjs.org/docs/advanced-features/custom-app