✍️ Next.js + styled-components 기본 세팅

박상은·2022년 5월 6일
0

🍃 blegram

목록 보기
5/20

📥 Next.js 절대 경로

  • tsconfig.json
{
  "compilerOptions": {
    // ... 나머지 생략
    // 아래 두개 추가 ( @src 외 원하는 폴더 추가하면 됨 )
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    }
  }
}
  • next.config.js
const path = require("path");

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  
  // 아래 구문 추가 ( 아마도 webpack에서 번들링 할 때 경로를 인식할 수 있게 해주는 부분 )
  webpack(config) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          "@src": path.resolve(__dirname, "src"),
        },
      },
    };
  },
};

🧹 styled-components reset css

아래 코드를 그대로 작성하고 <GlobalStyles />_app.tsx에서 넣어주기만 하면 됩니다.

npm i styled-components
npm i -D @types/styled-components
npm i styled-reset
  • 코드 예시
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle` 
  ${reset}

  * {
    box-sizing: border-box;
  }
  body {
    font-family: "Jua", sans-serif;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  input, textarea { 
    -moz-user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
  input:focus {
    outline: none;
  }
  button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
  }
`;

export default GlobalStyles;

🐺 Next.js + styled-components + TypeScript 적용법

npm i babel-plugin-styled-components
  • .babelrc
{
  "presets": ["next/babel"],
  "plugins": ["styled-components"]
}
  • _document.tsx
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    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 lang="ko">
        <Head>
          {/* 페비콘 */}
          <link rel="shortcut icon" href="/fav1.ico" />
          {/* SEO */}
          <meta name="keyword" content="blegram, 인스타그램 클론 코딩" />
          {/* 작성자 */}
          <meta name="author" content="1-blue" />
          {/* 문자 */}
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />

          {/* 구글 폰트 */}
          <link
            href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

🏁 styled-components theme 적용법

아래 코드를 적용하고 나면 color: ${({ theme }) => theme.color.dark}; 처럼 사용이 가능하며 자동완성이 지원됩니다.

const color = {
  white: "#F8F9FA",
  dark: "#121212",
};

// styled-components.d.ts에서 등록할 타입
export type Color = typeof color;

export default color;
  • src/styled-components.d.ts
import "styled-components";
import { Color } from "@src/styles/theme";

declare module "styled-components" {
  export interface DefaultTheme {
    color: Color;
  }
}

0개의 댓글