이미지같은 정적 asset 및 robots.txt를 public폴더에 둔다. root 디렉토리가 된다.
Image
next/image를 쓰면 아래와 같은 것들을 챙겨갈 수 있다.
- 뷰포트에 실제로 보일 때 로드
- 이미지 최적화
(브라우저가 해당 이미지를 지원하면 webp같은 최신 포맷으로 제공) - 스크린 사이즈에 따른 반응형 이미지
(스크린 사이즈가 작으면 작은 이미지 제공) - 외부로부터 import해서 보여주는 이미지도 적용된다.
Head
next/head에서 Head를 불러와서 title같은 태그 등 metadata를 정의해 줄 수 있다.
import Link from 'next/link';
import Head from 'next/head';
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href='/'>
<a>Back to home</a>
</Link>
</h2>
</>
);
}lang속성을 변경시킨다던지 html태그를 커스터마이징하고 싶다면 pages/_document.js 파일을 만들어서 정의해줄 수 있다. 자세한건 공식문서 Custom Document를 참고한다.
Script
https://nextjs.org/docs/basic-features/script
third-party js를 불러올 때 Head 컴포넌트 내에 정의해줄 수 있기는 하지만 이럴 경우 불러오는 순서를 명확히 정의할 수 없다. 그래서 next/script에 있는 Script 컴포넌트를 사용한다. strategy같은 속성은 공식문서를 참고하자.
import Link from 'next/link';
import Head from 'next/head';
import Script from 'next/script';
export default function FirstPost() {
return (
<>
<Head>
<title>...</title>
</Head>
<Script
src='https://connect.facebook.net/en_US/sdk.js'
strategy='lazyOnload'
onLoad={() => console.log('script loaded')}
/>
<h1>First Post</h1>
<h2>
<Link href='/'>
<a>Back to home</a>
</Link>
</h2>
</>
);
}CSS Styling
Next.js는 css, sass가 내장되어 있어서 import해서 사용할 수 있다. 내장되어 있는 styled-jsx와 내장되어 있지는 않지만 유명한 css-in-js 라이브러리인 styled-component와 emotion도 사용할 수 있다. tailwind도 사용가능하다.
CSS Module을 이용한 Layout 컴포넌트를 만들기.
Layout.js
import style from './Layout.module.css';
export default function Layout({ children }) {
return <div className={style.container}>{children}</div>;
}Layout.module.css
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}전체 페이지에 스타일을 적용하기 위한 Global Style
styles/global.css에 스타일 코드를 작성하고 pages/_app.js에서 import만 하면 전체 페이지에 스타일이 적용 된다.
반드시
_app.js내에 글로벌 스타일을 로드한다!
공유하는 것을 좋아하는 프론트엔드 개발자