[NextJS] 세팅하기 - NextJS 13 + Typescript + Style-components + Tailwind CSS

Jihyun-Jeon·2022년 12월 14일

NextJS

목록 보기

7/8

NextJS 13 + Typescript + Style-components + Tailwind CSS로 셋팅하기

공식문서 샘플 양식 참조

Example app with styled-components

Example app with styled-components using babel

✅ NextJS폴더 생성

npx create-next-app project-name

✅ styled-component 셋팅

1. 바벨 대신 SWC를 사용하기

SWC는 Rust라는 언어로 제작된 컴파일러이다.

SWC로 Next.js 프로젝트를 빌드하면 바벨을 사용했을 때보다 컴파일 속도가 17배 빠르다고 한다.
공식문서에서도 NextJS가 SWC를 기반으로 구축되었다고 한다.

→ 적용 방법
: next.config.js 설정

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true, // Next에게 styled-component도 처리해달라고 옵션을 설정해줌
  },
};

2. _document.tsx 설정

NextJS에서 styled-component 사용하려면 이런 코드를 설정해야 한다.

왜냐면⁉️
서버 측에서 styled-component를 렌더링하려면 _document.js를 재정의해야 하기 때문이다.
Next에서 ssr할 때 styled-compenet에 있는 style은 바로 처리하지 못한다.
때문에 ssr에서 스타일을 적용되기 위해 이런 코드를 작성해준다.

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

✅ global style 적용하기

방법1. global css파일을 import하는 방법 ← 난 이 방식으로 선택

tailwind를 적용하기 위해 css파일을 직접 import하는 방법을 택했다.

방법2. global style 컴포넌트로 만들어 적용하는 방법

styled component에서 지원하는 GlobalStyle함수를 사용하여 global css를 만드는 방법도 있다.
tailwind를 쓰지 않았다면 이 방식으로 택할 것 같다.
css를 reset하기 위해 styled-reset 패키지 설치

✅ Head 셋팅

Head에 대한 공식문서
Head 샘플 공식문서

1. head를 설정할 때 NextJS에 빌트인 된 컴포넌트(Head)를 사용해야 한다.

import Head from 'next/head'

export function Home() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
    </div>
  )
}

2. title를 _app.tsx파일에서 Head에 설정해준다.

페이지 별로 title이 바뀐다면 각 페이지 파일에서 설정할 수도 있다.
_doucument.tsx에서 title 설정시 eslint오류가 난다.
: title은 페이지 레벨에서 사용되야 해서 document파일에 사용할 수 없다고 한다.
: No Title in Document Head