🔥 Next.js + TypeScript + styled-components 초기 세팅

hzn·2023년 3월 28일

PROJECT🏝

목록 보기

11/24

1. 새로운 Next.js + TypeScript 프로젝트 생성

npx create-next-app@latest --typescript 프로젝트명

1-1. 기본 폴더 구조

1) Public 폴더

정적 폴더
브라우저에 직접 엑세스 가능

2) styles 폴더

global.css : _app.tsx에서만 사용 가능
컴포넌트명.module.css : 다른 컴포넌트에서 import 해서 사용 (Home.module.css 등)

👉🏽 styled-components을 사용하면 전역 스타일을 global-style.ts 사용하므로 global.css는 이후 삭제

3) pages 폴더

`index.tsx`

기본 페이지

`_app.tsx`

모든 페이지를 감싸고 있는 공통 레이아웃
가장 최초로 실행됨
_app.tsx 이후 _document.tsx가 실행됨

`_document.tsx`

전체 페이지의 meta 태그 정의에 관여하는 컴포넌트
따로 설정 안하면 디폴트 값 적용
이 곳의 콘솔은 서버에서만 보이고 클라이언트에서는 안보임

2. styled-components 사용하기

next.js에서 styled-components를 사용하려면 추가적인 세팅이 필요하다!

2-1. 설치하기

styled-components 설치

yarn add styled-components @types/styled-components

babel-plugin 설치

문자열 안에 스타일 들어가는 것 처리를 위해

yarn add -dev babel-plugin-styled-components

styled-reset 설치

전역 스타일링 시 레이아웃 리셋을 위해

yarn add styled-reset

2-2. 파일 세팅

1) `.barbelrc` 파일

next.js가 수행하는 SSR에 의해 styled-components 스타일 적용 전에 화면 렌더링 되는 문제를 방지하기 위한 설정

{
        "presets" : ["next/babel"],
        "plugins": [
            [
                "styled-components",
                {
                    "ssr": true,
                    "displayName": true,
                    "preprocess": false
                }
            ]
        ]
    }

2) `_document.tsx` 파일

SSR 때문에 styled-components에 대한 사전 작업이 필요
서버에서 받아온 HTML, CSS(styled-components X)와 클라이언트가 렌더링한 HTML, CSS가 다르면 Next.js가 warning을 띄운다
👉🏽 서버 단에서 styled-components를 지원해서 이 간극을 맞추기 위한 설정

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components'; // 0)

export default class MyDocument extends Document {

  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet(); // 1)
    const originalRenderPage = ctx.renderPage;

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

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

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

1) ServerStyleSheet를 이용하여 sheets라는 인스턴스를 생성.
2) sheets를 이용하여 지정한 컴포넌트(여기서는 <App />)의 스타일 요소를 검색하고 그 스타일을 <style> 태그로 추출.
3) 추출한 결과물을 Document에 전달.
👉🏽 이제 서버에서 렌더링되고 소스 페이지에서도 스타일이 표시된다

3) `styles` 폴더 : `global-styles.ts`와 `theme.ts`

    ├── styles
    │   ├── global-styles.ts      
    │   ├── theme.ts

`global-styles.ts`

전역으로 (공통적으로) 사용하는 CSS
styled-reset을 import 해와서 이전에 적용돼있는 레이아웃을 리셋시킨다.

import reset from 'styled-reset'; // 레이아웃 리셋
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  html,
  body {
    padding: 0;
    margin: 0;
    letter-spacing: -1px;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  .txt-c {
    text-align: center;
  }
  .txt-r {
    text-align: right;
  }
  .txt-l {
    text-align: left;
  }
  p {
    margin: 0;
  }
`;

`theme.ts`

공통적으로 사용할 테마 (media query, color 등)

4) `_app.tsx` : 스타일 적용하기

스타일 (global-styles.ts와 theme.ts) 적용하기

import type { AppProps } from 'next/app';
import { ThemeProvider } from 'styled-components'; // 1)
import GlobalStyle from '../styles/global-style'; // 2)
import { theme } from '../styles/theme'; // 1)

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <ThemeProvider theme={theme}> // 1)
        <GlobalStyle /> // 2)
          <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

1) ThemeProvider를 주입하고 theme를 사용하도록 세팅
2) GlobalStyle 적용

레퍼런스

[기억보단 기록을] next.js에서 material-ui와 styled-components 사용하기

Next.js + Typescript 초기세팅 하기

hzn

이전 포스트

[Ngether] refetchInterval로 채팅 메시지 자동 업데이트

다음 포스트

🔥 Next.js + TypeScript + styled-components 초기 세팅

PROJECT🏝

1. 새로운 Next.js + TypeScript 프로젝트 생성

1-1. 기본 폴더 구조

1) Public 폴더

2) styles 폴더

3) pages 폴더

`index.tsx`

`_app.tsx`

`_document.tsx`

2. styled-components 사용하기

2-1. 설치하기

styled-components 설치

babel-plugin 설치

styled-reset 설치

2-2. 파일 세팅

1) `.barbelrc` 파일

2) `_document.tsx` 파일

3) `styles` 폴더 : `global-styles.ts`와 `theme.ts`

`global-styles.ts`

`theme.ts`

4) `_app.tsx` : 스타일 적용하기

레퍼런스

[Ngether] refetchInterval로 채팅 메시지 자동 업데이트

styled-components 사용 시 : Babel 대신 SWC로 빌드하기

0개의 댓글

🔥 Next.js + TypeScript + styled-components 초기 세팅

PROJECT🏝

1. 새로운 Next.js + TypeScript 프로젝트 생성

1-1. 기본 폴더 구조

1) Public 폴더

2) styles 폴더

3) pages 폴더

index.tsx

_app.tsx

_document.tsx

2. styled-components 사용하기

2-1. 설치하기

styled-components 설치

babel-plugin 설치

styled-reset 설치

2-2. 파일 세팅

1) .barbelrc 파일

2) _document.tsx 파일

3) styles 폴더 : global-styles.ts와 theme.ts

global-styles.ts

theme.ts

4) _app.tsx : 스타일 적용하기

레퍼런스

[Ngether] refetchInterval로 채팅 메시지 자동 업데이트

styled-components 사용 시 : Babel 대신 SWC로 빌드하기

0개의 댓글

`index.tsx`

`_app.tsx`

`_document.tsx`

1) `.barbelrc` 파일

2) `_document.tsx` 파일

3) `styles` 폴더 : `global-styles.ts`와 `theme.ts`

`global-styles.ts`

`theme.ts`

4) `_app.tsx` : 스타일 적용하기