정보 제공
넥스트는 public과 같은 최상위 디렉토리에 정적 파일을 제공할 수 있다
메타데이터
넥스트는 html 없이 jsx만으로도 페이지를 만들어 준다
각 페이지에 html태그, title정보나 다른 메타데이터 정보를 수정하고 싶다면 어떻게 해야할까?
넥스트의 Head 컴포넌트를 사용하면 된다
이 컴포넌트는 해당 페이지의 <head>에 포함할 수 있는 정보들을 수정할 수 있게 해준다
import Link from "next/link";
import Head from "next/head";
export default function FirstPost(){
return (
<div>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href={'/'}>
<a >back to home</a>
</Link>
</h2>
</div>
)
}넣고 싶은 메타데이터가 있다면 Head 컴포넌트 내부에 넣으면 된다
<Head>
<title>First Post</title>
<meta property="og:title" content="My page title" key="title" />
</Head>스타일링
넥스트는 sass와 CSS를 기본적으로 지원한다
모듈CSS
우선 최상위 디렉토리에 components 폴더를 만들고 그 아래에 Layout.js를 만들고 css모듈도 작성해주자
pages 하위의 폴더만 라우트 대상이다 여기에 만들어진 js들은 그냥 컴포넌트로 작동한다
import React from 'react';
import styles from './layout.module.css';
const Layout = ({children}) => {
return (
<div className={styles.container}>
{children}
</div>
);
};
export default Layout;
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}넥스트는 css모듈을 지원하고 코드스플리팅 또한 적용된다
전역 스타일링
위에서 사용한 모듈 스타일링은 컴포넌트 하나를 스타일링하기에 최적화된 방법이다
프로젝트의 모든 페이지에 적용되어야할 스타일이 있다면 _app.js를 사용하는 것이 바람직하다
pages 바로 아래에 _app.js를 생성하자
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}이 App컴포넌트는 pages 하위에 있는 모든 컴포넌트들이 사용하는 최상위 레벨의 컴포넌트이다
\app.js를 추가할 때는 서버를 껐다가 켜주어야한다_
이제 전역 스타일링을 해주기위해 프로젝트 최상위에 styles폴더를 만들고 그 아래에 global.css를 만들어주자
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
line-height: 1.6;
font-size: 18px;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}first-post페이지에 가 보면 적용된 것을 볼 수 있다
'Next.js' 카테고리의 다른 글
| Next.js로 블로그 만들기 - 5 (0) | 2021.04.06 |
|---|---|
| Next.js로 블로그 만들기 - 4 (0) | 2021.03.30 |
| Next.js로 블로그 만들기 - 3 (0) | 2021.03.28 |
| Next.js로 블로그 만들기 - 1 (0) | 2021.03.25 |
| next.js 란? (0) | 2021.03.21 |
