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>
</>
)
}
title
태그를 넣어주면 동적으로 타이틀이 바뀐다.key
prop을 이용하여 해당 태그가 한 번만 렌더링되도록 확실히 할 수도 있다.공식문서에서 설명하기를 next는 Css Module, Sass, styled-jsx를 빌트인하고 있지만 styled-components는 빌트인되어있지 않아 별도의 설정이 필요하다.
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()
}
}
}
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 }]]
}
pages/_app.js
에서 import해서 적용yarn remove [package]
: 해당 패키지 삭제yarn add [package] --dev
: 해당 패키지 devDependencies로 추가