Programming/Next.js
[Next.js] TypeScript + 공통 레이아웃 적용하기
aldrn29
2022. 7. 9. 16:46
인스타그램 클론 코딩을 하면서 상단에 고정적으로 들어갈 내용이 있었다. 이를 페이지 변경 시에도 하나의 레이아웃으로 재사용하기 위하여 <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
Learn how to share components and state between Next.js pages with Layouts.
nextjs.org
728x90
728x90