<aside> 🧑🏻‍💻 Next.js 초기세팅 코드에 App이라는 이름의 컴포넌트(pages/_app.tsx파일)가 존재하지 않습니다. 하지만 App 컴포넌트는 공통로직을 위해 꼭 필요한 중요한 컴포넌트 입니다!

</aside>

App 컴포넌트

• App이라는 컴포넌트는 모든 페이지(pages 밑에 있는 컴포넌트)를 렌더할 때 항상 호출됩니다.

  • 그래서 모든 페이지에 필요한 공통 로직의 경우 App 컴포넌트에 추가할 수 있습니다.

• Next.js 초기세팅 코드에는 해당 파일이 없기 때문에, 개발자가 직접 추가해야 합니다! page폴더 밑에 _app.tsx 파일을 생성해 주세요 🙌🏻

• 정해진 규칙대로, 아래와 같이 생성해주어야 합니다.

  // pages/_app.tsx
  
  import { AppProps } from 'next/app';
  
  const MyApp = ({ Component, pageProps }: AppProps) => {
  	return <Component {...pageProps} />
  };
  
  export default MyApp;
  

• 위와 같이 파일을 만들어준 후, 공통 로직을 마음껏 추가하시면 됩니다!

언제 필요한가요?

아래와 같은 경우에 _app.tsx을 사용합니다.

• 페이지 이동할 때마다 유지해야 하는 스타일이나 레이아웃 적용
• 페이지 이동할 때 유지해야할 state 관리
• componentDidCatch 라이프사이클로 공통 에러 처리
• 페이지에 공통 로직을 통해 데이터를 주입해야하는 경우
• 모든 페이지에 필요한 css를 적용하는 경우

사이트 <title>