CRA에서 App 컴포넌트는 모든 페이지(pages 밑에 있는 컴포넌트)를 렌더할 때 항상 호출되고, 모든 페이지에 필요한 공통 로직은 App 컴포넌트에 추가할 수 있다.
그런데, Next.js 초기세팅 코드는 App 컴포넌트가 없기 때문에 page폴더 밑에 _app.tsx 파일을 만들어주어야 한다. 공통으로 적용될 항목은 여기에 추가하면 된다.
[app.jsx]
import { AppProps } from 'next/app';
const MyApp = () => {
return <Component {...pageProps} />
};
export default MyApp;
[app.tsx]
import { AppProps } from 'next/app';
const MyApp = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} />
};
export default MyApp;
주의 사항
<title> </title> 은 _document.tsx에서 추가하는 것이 아닌 _app.tsx에서 추가해야 한다.[app.jsx]
import React from 'react';
import Head from 'next/head';
import {
MainSection,
FeaturesSection,
ReviewsSection,
CommunityPoolSection,
} from 'components/Business';
const MyApp = () => {
return (
<>
<Head>
<title>위코드 기업협업 문의</title>
</Head>
<MainSection />
<FeaturesSection />
<ReviewsSection />
<CommunityPoolSection />
</>
);
};
export default MyApp;