QDD 1-2. Next.js pages 기능 & Styled-components 규칙

폰트를 포함하는 global styles를 적용할 root 컴포넌트가 필요하다..

Next.js 에서는 _app 컴포넌트가 root 컴포넌트가 되며 여기에 글로벌 스타일을 추가할 수 있다

pages/_app.tsx를 만든다

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

styled-components의 createGlobalStyle API 로 글로벌 스타일을 만든 뒤, 컴포넌트 형태로 import 하여 추가해야 하는데,

이왕이면 Layout 컴포넌트로 감싸는게 좋을 것 같다.

그런데 theme provider로 theme 도 주입할 것이기 때문에, Layout 컴포넌트에서 import 하는 편이 더 좋을 것 같다.

그런데 나중에 로그인 페이지의 경우에는 레이아웃을 별도로 적용하는게 나을 것 같은데..

_app.tsx의 <Component /> 를 아예 레이아웃으로 래핑하면, 컴포넌트 트리 아래로 모두 레이아웃이 적용되기 때문에, 각각의 페이지에 레이아웃으로 래핑하는 것이 좋겠다.

추가로, 각 페이지의 HTML <head/>, <body/> 를 수정하려면, pages/_document.tsx 파일을 추가한다

특이한 점은 클래스형 컴포넌트로 되어 있음

Head를 다루는 김에 전체 앱의 title을 head 의 title element에 추가하려고 했으나, ESLint 경고 발생

_document 에서 로직을 추가하거나 import 하는 것은 지양하고,

title은 Layout 컴포넌트에서 next/head를 import 해서 지정해야 한다

pages/about.tsx 를 만들면 /about 페이지의 컴포넌트를 만들 수 있다

또는 pages/about/index.tsx 형태로 만들어도 결과는 같다

다이나믹 라우팅을 적용할 수도 있다

pages/event/[id].tsx 형태로 만들면 pages/event/1 이렇게 페이지가 라우팅된다.

공식문서를 보면, 하위 페이지가 있는 경우 폴더를 만들고, 아닌 경우 바로 컴포넌트를 만드는 것 같다

처음엔 그냥 Header.tsx 내부에서 styled 까지 함께 작성했다. 그래도 메인 컴포넌트 아래에 styled를 몰아 놓아서 최대한 가독성을 살리려고 했다

하지만, 로직이 추가되면, import도 너무 많아지고, 코드가 너무 복잡해질 것 같아서 styled를 따로 분리했다

티스토리툴바