Next JS에서 레이아웃 사용하기
next · 2021년 4월 20일 · 6 min read
안녕하세요.
오늘은 Nuxt에서 자주 사용하던 레이아웃 개념을 Next JS에서도 구현해 보았습니다.
예제를 통해 직접 레이아웃을 구성해 봅시다.
들어가며
홈페이지를 구성할 때, 우리는 대체로 네비게이션과 푸터, 플로팅 버튼 등을 포함합니다.
개발단계에서 이들 컴포넌트를 페이지마다 일일이 import하는 것은 매우 비효율적인 일입니다.
만약 이들처럼 대부분의 페이지에서 보여줘야될 내용이 있다면,
레이아웃 컴포넌트를 통해 손쉽게 유지보수할 수 있을 것입니다.
만들기
1. /components/Layouts 폴더를 생성하고 Default.js 파일을 생성합니다.
레이아웃들을 저장하는 폴더에 각 유저 시나리오 대로 필요한 레이아웃들을 구성해둘 것입니다.
이번 예제에서는 가장 기본적으로 네비게이션와 푸터를 포함한 레이아웃을 만들어 보겠습니다.
2. 아래 코드를 입력합니다.
import Head from 'next/head'
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'
const DefaultLayout = (props) => {
return (
<div className="layout">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charSet="utf-8" />
</Head>
<Nav></Nav>
<div className="content-wrapper">{props.children}</div>
<Footer></Footer>
</div>
)
}
레이아웃 구성 시 Head를 사용하여 메타태그와 같은 헤더정보를 포함한다면 더 좋은 구성이 될것입니다.
3. 페이지에서 import하여 사용합니다.
import DefaultLayout from '@/components/Layouts/Default'
export default function index() {
return (
<DefaultLayout>
<div>레이아웃 테스트</div>
</DefaultLayout>
)
}
레이아웃을 페이지에서 import하여 위와 같이 사용합니다. DefaultLayout 태그 내에 있는 콘텐츠들은 layout.js의 템플릿에서 props.children을 통해 포함되게 됩니다.
관련 포스트
next image blurDataURL 직접 부여하기
NextJS를 사용하면, 무조건 거치게 되는 기능이 있다. 바로 Image Optimization이다.
필자도 현록을 개발하면서 LCP 시점을 개선하기 위한 방법을 찾던 중 알게 됐는데, 파면 팔수록 Vercel은 정말 무서울 지경이다.
오늘연 여기서 placeholder prop에 blur를 부여하고 blurDataURL prop value를 직접 부여하는 경우를 다뤄보겠다.
next·2022년 10월 5일·6 min read
Next JS에서 path alias 설정하기 (feat. @/components)
오늘은 Next JS에서 import 시 복잡한 relative path 대신 absolute path 사용을 위한 설정법을 알아봅시다. file path를 상대경로로 지정하다보면 유지보수면에서도 복잡하고, path를 지정할 때마다 경로가 헷갈려서 발생하는 오류는 덤입니다. 이럴 때 path에 대한 alias를 설정하면 코드는 확 깔끔해질 것입니다. 아래 예제를 통해서 따라해봅시다.
next·2021년 4월 21일·4 min read