[Next.js] TypeScript + 공통 레이아웃 적용하기

인스타그램 클론 코딩을 하면서 상단에 고정적으로 들어갈 내용이 있었다. 이를 페이지 변경 시에도 하나의 레이아웃으로 재사용하기 위하여 <Layout /> 을 구현하여 유지하기로 하였다!

 

---

 

공통 레이아웃 적용하기

1. 상단에 공통으로 적용될 컴포넌트 <Header /> 구현하기

2. 페이지 변경 시에도 같은 모양을 유지할 수 있게 레이아웃 컴포넌트 <Layout /> 구현하기

3. _app.tsx 구현하기

 

전체 코드

pages > _app.tsx

import '../styles/globals.css'
import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
    )
}

export default MyApp

 

components > Layout.tsx

import Header from './Header'

const Layout = ({ children }) => {
    return (
        <>
            <Header />
            <main>{children}</main>
        </>
    )
}

export default Layout;

 

components > Header.tsx

const Header = () => {
    return (
        <Wrapper>
            <Logo>Instagram</Logo>
            <ImageWrapper>
                <Image src={Add} alt="add" width={30} height={30} />
                <Image src={Heart} alt="heart" width={30} height={30} />
                <Image src={Send} alt="send" width={30} height={30} />
            </ImageWrapper>
        </Wrapper>
    )
}

export default Header;

 

결과 화면

 

공식 문서

https://nextjs.org/docs/basic-features/layouts

Basic Features: Layouts | Next.js