Next.js 세팅

1. next 프로젝트 생성 

npx create-next-app project-name

 

2. 타입스크립트 적용

yarn add -D typescript @types/react @types/node @types@react-dom

 

3. 스타일 컴포넌트 추가

yarn add --save @types/styled-components

yarn add --save-dev babel-plugin-styled-components

https://github.com/vercel/next.js/tree/master/examples/with-styled-components

GitHub - vercel/next.js: The React Framework

초기세팅

// pages/_document.tsx

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    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()
    }
  }
}

 

// .babelrc

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

 

적용법

// styled Component Global style
// pages/styles/GlobalStyles.ts

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    * {
        box-sizing: border-box;
    }

    html, body {
        padding: 0;
        margin: 0;
        font-family: Noto Sans, Noto Sans KR;
    }


    @media screen and (min-width: 1280px) {
        html {
            font-size: 24px;
        }
    }

    @media screen and (min-width: 992px) and (max-width: 1279px) {
        html {
            font-size: 30px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 991px) {
        html {
            font-size: 30px;
        }

    }

    @media screen and (max-width: 767px) {
        html, body {
            font-size: 15px;
        }
    }

`;

export default GlobalStyle;

// pages/styles/theme.jsx

const screenSize = {
  mobile: "767px",
  tablet_min: "768px",
  tablet_max: "991px",
  laptop_min: "992px",
  laptop_max: "1279px",
  desktop: "1280px",
};

const color = {
  mainTextColor: "rgba(5, 7, 9, 0.9)",
  subTextColor: "rgba(5,7,9, 0.58)",
  washTextColor: "#fefefe",
  highlightDarkTextColor: "#002b00",
  highlightTextColor: "#005500",
  disableTextColor: "rgba(153, 153, 153, 0.4)",
  underLineColor: "#c9f227",
  defaultBackgroundColor: "rgba(0, 85, 0, 0.05)",
  borderColor: "rgba(204, 204, 204, 0.6)",
};

const theme = {
  ...color,
  mobile: `(max-width: ${screenSize.mobile})`,
  tablet: `(min-width: ${screenSize.tablet_min}) and (max-width: ${screenSize.tablet_max})`,
  laptop: `(min-width: ${screenSize.laptop_min}) and (max-width: ${screenSize.laptop_max})`,
  desktop: `(min-width: ${screenSize.desktop})`,
};

export default theme;

// 사용 예시

// const MainWrap = styled.main`
//   width: 1200px;

//   @media ${(props) => props.theme.tablet} {
//     width: 100%;
//     margin: 0 auto;
//   }
// `;

// // 색상
// const MainText = styled.div`
//   color: ${(props) => props.theme.mainColor};
// `;

// pages/_app.tsx

import {AppProps} from "next/app"
import GlobalStyled from "../styles/GlobalStyle";
import { ThemeProvider } from "styled-components";
import theme from "../styles/theme";


export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
    <ThemeProvider theme={theme}>
        <GlobalStyled />
        <Header />
        <Component {...pageProps} />
        {/* <Footer /> */}
      </ThemeProvider>
    </>
  )
}

 

 

4.  svg 라이브러리 추가

yarn add babel-plugin-inline-react-svg

https://github.com/airbnb/babel-plugin-inline-react-svg

GitHub - airbnb/babel-plugin-inline-react-svg: A babel plugin that optimizes and inlines SVGs for your React Components.

// types/image.d.ts

declare module "*.svg";

//// .babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }], "inline-react-svg"]
}