9월 19일 일요일

< yujin />·2021년 9월 19일
0

일일회고

목록 보기
5/10
post-thumbnail

✅ 알게된것

1. Next에서의 meta-data 처리

next에서는 Head라는 컴포넌트를 사용하여 meta-data를 다룰 수 있다.

import Head from 'next/head'

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
    	<meta property="og:title" content="First page title" key="title" />
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}
  • 이렇게 Head 안에 title 태그를 넣어주면 동적으로 타이틀이 바뀐다.
  • key prop을 이용하여 해당 태그가 한 번만 렌더링되도록 확실히 할 수도 있다.

2. Next with styled-components

공식문서에서 설명하기를 next는 Css Module, Sass, styled-jsx를 빌트인하고 있지만 styled-components는 빌트인되어있지 않아 별도의 설정이 필요하다.

a. page dir 안에 _document.js 만들기

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()
    }
  }
}

b. root dir에 .babelrc 만들기

// --dev option으로 babel-plugin-styled-components 추가
// package.json
  "devDependencies": {
    "babel-plugin-styled-components": "^1.13.2"
  }

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

c. global css는 반드시 pages/_app.js에서 import해서 적용

  • index.js 등 _app.js가 아닌 다른 곳에서 import 하면 컴파일 에러 남

3. yarn

  • yarn remove [package] : 해당 패키지 삭제
  • yarn add [package] --dev : 해당 패키지 devDependencies로 추가

Reference

profile
잘하진 않지만 포기하진 않을거햐

0개의 댓글