Next.js + Netlify-CMS (2)

Seo·2021년 1월 18일

Netlify-CMS TIL nextjs

Next.js

목록 보기

2/3

이번 Post에서는 Nextjs에서 제공하는 asset과 관련된 주요 기능들에 대해서 알아보고자 합니다.

Built-In CSS

only just import .css
enable module.css
enable scss, sass, less(after install that)
CSS-In-JS
styled-jsx를 기본적으로 제공합니다.
styled-components와 같은 다양한 CSS-In-Js package를 사용할 수 있습니다.

Image Optimaization

10.0.0 버전 이후에 Nextjs는 built-in Image Component와 Automatic Image Optimization을 제공합니다.

next/image(<img> element 확장)

resizing, optimizing,WebP와 같은 modern format을 지원하는 image들을 허용합니다.

이것들을 통해 작은 Viewport에 큰 이미지가 전송되는 것을 방지 할 수 있습니다.

또한 Nextjs에게 미래의 이미지 형식을 자동으로 적용하도록 허용하고 브라우저(해당 형식을 지원하는)에 제공 할 수 있습니다.

Automatic Image Optimization은 어떤 이미지 소스든 동작합니다. 외부 data source에 호스팅된 이미지라 할지라도(CMS같은) 그것 역시 optimize 될 수 있습니다.

built 시에 image를 optimize하는 것 대신에 Nextjs는 사용자가 해당 이미지를 요청한 이후에 on-demand로 optimize합니다.
(정적 사이트 생성기들과 static-only 솔루션과는 달리, built 시간이 증가되지 않습니다, 10개든 10만개든)

image들은 default로 lazy loading됩니다.
즉, page는 viewport 바깥 이미지들에 영향을 받지 않습니다.
image는 viewport로 scroll되었을 때만 load됩니다.

Image Component

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

next.config.js 에서 images를 통해 더 확장해서 사용할 수 있습니다.

domains

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

외부 website에서 호스팅된 이미지들을 optimization을 위해 image src를 이용하세요.

(loader에 외부 이미지 서비스를 설정하게 되면 이 옵션은 무시됩니다.)

loader

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

Nextjs built-in Image Optimization을 사용하는 것 대신에 cloud provider를 사용하길 원한다면 loader와 path prefix를 설정하면 됩니다.

제공되는 cloud provider는 다음과 같습니다.

Vercel: Vercel에 deploy될 때 자동으로 동작합니다.
no configuration necessary.
https://vercel.com/docs/next.js/image-optimization
Imgix: loader: 'imgix'
Cloudinary: loader: 'cloudinary'
Akamai: loader: 'akamai'
Default: next dev, next start 또는 custom server에서는 자동으로 동작합니다.

Caching

default loader에서 caching을 설명하는 부분입니다.
(cloud provider caching은 각 site에서 확인하면 됩니다.)

Image는 요청이 왔을 때 동적으로 optimize되어 <distDir>/cache/images에 저장됩니다.

cache가 만료될 때까지 후속요청에 대해서는 이곳에서 제공 될 것입니다.

만약 만료되었다면 cache에 있던 만료된 이미지를 삭제하고 다시 새로운 cache를 위한 image를 생성합니다.

만료는 업스트림 서버에 Cache-Control header에 의해 정의됩니다.

Cache-Control
s-maxage가 있으면 사용,
s-maxage가 없다면 max-age 사용,
max-age가 없다면 60 sec로 사용

생성 가능한 전체 이미지 수를 줄이기 위해 deviceSize, imageSize를 설정할 수 있습니다.

module.exports = {
  images: {
    deviceSizes: [
      640, 750, 828, 1080, 1200, 1920, 2048, 3840
    ],
    imageSizes: [
      16, 32, 48, 64, 96, 128, 256, 384
    ],
  },
}

Static File

Nextjs는 root에 public폴더 아래에 static files(이미지 등)을 제공할 수 있습니다.

예를 들어 public/me.png 이미지를 추가한다면 아래와 같은 코드로 접근 가능합니다.

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" />
}

export default Avatar

또한 robots.txt, favicon.ico, Google Site Verification, other static files(.html을 포함하여) 사용하는 것에 유용합니다.

public 폴더는 다른 이름으로 바꾸지 마세요.
오직 public폴더에서만 static asset이 제공됩니다.

pages/ 아래 file Name과 동일한 이름(확장자명포함)으로 생성해두지 마세요. conflict error가 발생합니다.
하나의 URL에는 하나의 resource만이 사용될 수 있기 때문입니다.
conflict
pages/hello.js
public/hello
Non-conflict
pages/hello.js
public/hello.txt