• 코딩 기록/Next.js

    (Next.js) _app.js 를 이용하여 공통 레이아웃 사용하기

    2021. 2. 19.

    by. kimyang-Sun

    Next.js

     

    Next.js 에서 _app.js 를 이용하여 공통 레이아웃을 사용해보겠습니다.

    저는 타입스크립트를 사용하는 프로젝트를 만들었기 때문에 _app.js가 아닌 _app.tsx파일입니다.

    우선 Components 폴더에 공통적으로 사용할 레이아웃 컴포넌트인 AppLayout.tsx 파일을 만들어줍니다.

     

    import React from 'react';
import Header from './header';

type AppLayoutProps = {
  children: React.ReactNode;
};

function AppLayout({ children }: AppLayoutProps) {
  return (
    <div>
      <Header />
      {children}
    </div>
  );
}

export default AppLayout;

     

    레이아웃 컴포넌트는 공통으로 들어가게될 Header 컴포넌트가 있고

    자식으로 오게될 { children } prop도 리턴해줍니다.

     

    이제 pages 디렉토리 안에 _app.tsx 를 만들어줍니다.

     

    import React from 'react';
import AppLayout from '../components/AppLayout';

type AppProps = {
  Component: React.ElementType;
};

function App({ Component }: AppProps) {
  return (
    <AppLayout>
      <Component />
    </AppLayout>
  );
}

export default App;

     

    해당 컴포넌트에서는 Component를 props로 받고 공통된 레이아웃 컴포넌트인 AppLayout 컴포넌트를 불러와줍니다.

    AppLayout 컴포넌트 안에 Component 를 넣어주고 리턴해줍니다.

    http://localhost:3000/

    Home 화면

    http://localhost:3000/profile

    Profile 화면

    http://localhost:3000/about

    About 화면

    이렇게 어떤 페이지를 이동해도 Header 컴포넌트인 Link 메뉴들은 공통적으로 렌더링됩니다.

    _app.js 의 역할은 이렇게 공통적으로 무언가를 적용시켜줄 수 있는데 react-create-app 으로 리액트 프로젝트를 시작했을때

    App.jsx 파일에 App 컴포넌트와 비슷하다고 보시면 됩니다.

     

    추가로 Next.js에서 지원해주는 Head 태그가 있습니다.

    HTML에서 Head 태그와 동일한 기능을 합니다.

     

    import React from 'react';
import AppLayout from '../components/AppLayout';
import Head from 'next/head';

type AppProps = {
  Component: React.ElementType;
};

function App({ Component }: AppProps) {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="description" content="자신의 마음을 적는 공간" />
        <title>쓰다</title>
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </>
  );
}

export default App;

     

    이렇게 App 컴포넌트에서 공통적으로 meta와 title을 넣어주면 모든 페이지에 공통적으로 적용되게 됩니다.

    만약 공통적으로 설정한것과 다르게 해주고 싶은 컴포넌트가 있으면 해당 컴포넌트에서 똑같은 방식으로

    Head 태그를 임포트로 불러와서 코드를 추가해주시면 됩니다.

    '코딩 기록 > Next.js' 카테고리의 다른 글

    (Next.js) Link를 사용하여 페이지 이동하기  (0) 2021.02.19
    (Next.js) create next-app으로 Next.js 시작하기 (with TypeScript)  (0) 2021.02.19
    (Next.js) Next.js 시작하기 (with TypeScript)  (0) 2021.02.17

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바