ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Next.js - 스타일드 컴포넌트에 SSR 적용하기
      React.js & Next.js 2022. 9. 25. 21:33

       

      Global style 및 헤더 컴포넌트에 SSR 적용하기

      레퍼런스

      next.js/examples/with-styled-components at canary · vercel/next.js

       

      GitHub - vercel/next.js: The React Framework

      The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

      github.com

      Start

      기본적으로 Next.js 에서 SSR 을 공식적으로 지원하는 라이브러리는 다음과 같습니다.

      Examples

      이 중에서 우리는 가장 많이 쓰이는 CSS-in-JS 라이브러리 중 하나인 스타일드 컴포넌트에 SSR을 적용할 것입니다. 기본적으로는 _document.tsx, _app.tsx 에 스타일드 컴포넌트를 SSR로 사용하기 위한 기본 설정을 진행하고, 이를 바탕으로 원하는 컴포넌트에 개별 적용합니다.

       

      이번 프로젝트에서 SSR을 사용하기 위해 설정하는 파일은 다음과 같습니다

      - _document.tsx

      - _app.tsx

      - style/globalstyles.tsx

      - components/Header/index.tsx

      - components/Header/index.styles.tsx

      📙_document.tsx

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

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

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

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

  render() {
    return (
      <Html lang="ko">
        <Head>
          <meta name="title" content="이젤 넥스트 놀이터" />
          <meta name="description" content="이젤 넥스트 놀이터입니다" />
          <link
            href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700&display=swap&subset=korean"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

      📙_app.tsx

      import type { AppProps } from 'next/app';
import Header from '@/components/Header';
import GlobalStyle from '@/styles/globalstyles';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <GlobalStyle />
      <Header />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

      CNA(Create-Next-App)으로 레포지토리를 초기화했을 경우, .css 를 통해 기본적인 스타일 코드가 적용되어 있을 것입니다. 우리는 스타일드 컴포넌트를 사용하기를 원하므로 이 기본 .css 파일 또한 스타일드 컴포넌트의 createGlobalStyled 메서드를 통해 새로 정의해줍니다.

      📙 styles/globalstyles.tsx

      import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    html,
    body {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans', 'Noto Sans KR';
    }

    a {
    color: inherit;
    text-decoration: none;
    }

    * {
    box-sizing: border-box;
    }

    @media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
    body {
        color: white;
        background: black;
    }
    }

`;

export default GlobalStyle;

      📙 components/Header/index.tsx

      import Link from 'next/link';
import React from 'react';
import * as S from './index.styles';

const Header = () => {
  return (
    <S.Header>
      <li>
        <Link href={'/normal_image'}>일반 이미지</Link>
      </li>
      <li>
        <Link href={'/aws_image'}>next 이미지 (aws)</Link>
      </li>
      <li>
        <Link href={'/static_image'}>next 이미지 (static)</Link>
      </li>
      <li>
        <Link href={'/animals'}>animals (nested routing)</Link>
      </li>
      <li>
        <Link href={'/fruits'}>fruits (dynamic routing)</Link>
      </li>
      <li>
        <Link href={'/movie_SP'}>movie - search (getServerSideProps)</Link>
      </li>
      <li>
        <Link href={'/movie_SP/spiderman'}>movie - spiderman (getStaticProps)</Link>
      </li>
    </S.Header>
  );
};

export default Header;

      📙 components/Header/index.styles.tsx

      import styled from 'styled-components';

export const Header = styled.ul`
  margin: 10px 0;
  padding-left: 10px;

  li {
    list-style: none;
    margin-right: 10px;

    color: navy;
  }
`;

      결과물 보기 (적용 이전과 비교하기)

      SSR 을 통해 전달받는 기본적인 static 파일

      Next js 의 styled-component SSR 적용

      프로젝트 styled-components SSR 미 적용시

      프로젝트 styled-components SSR 적용시

      'React.js & Next.js' 카테고리의 다른 글

      Next.js - middleware 사용하기 (로그인 연동하기)  (0) 2022.09.25
      Next.js - middleware 사용하기 (기본편)  (0) 2022.09.25
      Next.js - CSR, Client side data fetching  (0) 2022.09.18
      Next.js - SSG, getStaticProps  (0) 2022.09.18
      Next.js - SSR, getServerSideProps 적용하기  (0) 2022.09.18

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바