[nextJS] Next.js시작하기

suyeonme·2020년 12월 7일
0

React

목록 보기
12/26
post-thumbnail

설치 및 세팅은 공식홈페이지에 잘 설명되어 있어서 생략한다.

  • Run dev mode: npm run dev

Fetch Data

isomorphic-unfetchaxios는 둘다 클라이언트와 서버의 환경 모두에서 작동한다. 따라서 둘 중 하나의 패키지를 설치한다.

  • npm i isomorphic-unfetch or axios
import styled from 'styled-components';
import fetch from 'isomorphic-unfetch';

function Home({ bpi }) {
  return (
    <div>
      <Prices bpi={bpi} />
    </div>
  );
}

export async function getStaticProps() { // (*)
  const res = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
  const data = await res.json();

  return {
    props: {
      bpi: data,
    },
  };
}

export default Home;

Styled-components 사용하기

  • npm i styled-components
  • npm i -D babel-plugin-styled-components
  • Create .babelrc file

.babelrc File

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

이 때, 스타일링이 되지 않은 컨텐츠의 flash를 막기 위해서 _document.js 수정한다.

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

class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet(); // (**) Below

    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    );

    const styleTags = sheet.getStyleElement();

    return { ...page, styleTags };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
            rel="stylesheet"
          />
          {this.props.styleTags}
        </Head>
        <body style={{ fontFamily: 'Poppins' }}>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

그리고 Layout 컴포넌트에 글로벌스타일을 입히고 원래 사용하던대로 styled-components를 사용하면 된다.


_document.js

_document.jshtml body와 같은 기본 태그들의 속성을 지정할 때 사용된다.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang="en"> // (*)
        <Head>
      	// script tags or link tags
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

_app.js

Next.js는 App component를 처음 페이지를 initializing 할 때 사용된다. _document.js_app.js 모두 page폴더안에 위치시킨다.

import '../src/styles/reset.css';
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  <title>BitRate</title>;
  return (
    <>
      <Head>
        <title>BitRate</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Deploy

Vercel을 이용하면 아주 쉽게 deploy를 할 수 있다. SSR을 사용하는 next.js의 경우에는 netlify보다 vercel이 훨씬 빠르고 편리한 것 같다.

profile
Frontend Engineer.

0개의 댓글