Next.js - Assets, MetaData, CSS

Gyu·2023년 10월 25일

React frontend next.js nextjs react.js

React.js

목록 보기

19/20

Next.js에서 정적 파일 불러오기

next.js에서는 루트 폴더에 있는 public 폴더에 이미지 파일 같은 정적파일을 보관하고, / 로 시작하는 url로 파일에 접근 가능합니다. 예를들어 public 폴더 내에 sample.png 파일이 있다면 코드 내에서는 /sample.png로 접근 가능합니다.
next.js에서 정적 파일 사용 시 주의 할 점
1. 정적 파일이 저장된 폴더 이름은 반드시 public 이어야 한다.
  - public 폴더 이름은 변경되어서는 안되며 public 폴더만 유일한 정적파일 보관 폴더로 사용되어야 한다.
2. public 폴더에 저장된 파일의 이름과, pages 폴더에 저장된 파일의 이름이 같으면 안 된다.
  - next.js가 이를 구분 하지 못한다. 만약 파일 이름이 같을 경우 확장자라도 다른게 해야한다.
3. public 폴더 내의 모든 파일은 next.js에 의해 빌드 타임에 제공된다. 런타임에 추가된 파일은 사용할 수가 없다.
  - 만약 런타임에 추가한 파일을 사용하고 싶을 경우 AWS S3같이 서드파티 서비스를 사용해야한다.

이미지 파일 사용하기

일반적인 방식인 img 태그를 사용한 이미지 불러오면 아래 사항을 수동으로 처리해야 한다.
1. 다양한 화면 크기에서 이미지가 반응하는지 확인
2. 서드파티 제품이나 라이브러리로 이미지 최적화
3. 화면에 표시될때만 ( 뷰포트에 들어갈 때만 ) 이미지 로드
next/image 의 Image 컴포넌트는 위 작업을 자동으로 해줍니다. Image 컴포넌트는 이미지 리사이징, 이미지 최적화 그리고 브라우저가 지원한다면 WebP같은 최신 이미지 포맷도 사용할 수 있게 해줍니다.
또한 Next.js는 빌드 시 이미지를 최적화하는 대신, 사용자가 요청할 때 만 이미지를 최적화합니다. 정적 사이트와는 달리, 10개의 이미지를 전송하든 1천만 개의 이미지를 전송하든 빌드 시간이 증가하지 않습니다.
이미지는 기본적으로 lazy loading 됩니다.(화면에 표시될 이미지만 로드 ) 즉, 뷰포트 외부의 이미지에 대해서는 페이지 속도에 영향을 미치지 않습니다.
이미지는 레이아웃 오류를 방지하여 렌더링됩니다. 사용자 예상치 못하게, 레이아웃이 움직여 잘못된 행동을 하게 되는 것을 방지합니다.

사용법

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

Image 컴포넌트 속성

src : 이미지 출처값으로, 프로젝트 디렉토리 내 정적경로 혹은 외부 도메인의 URL 스트링(config 설정 필요) 을 넘겨줘야 한다.
width, height : 이미지의 픽셀 너비 및 높이. 단위를 제외한 정수값을 전달해줘야 한다. (정적 이미지 혹은 layout="fii" 이 아닌 경우 요구된다.)
- Local Image는 자동으로 width, height를 계산해주지만(Cumulative Layout Shift 미발생), Remote Image는 Next.js가 빌드 시점에 파일에 접근할 수 없으므로 width, height props를 필수로 입력해줘야 한다.
기타 속성 자세히 보기

matadata 설정 하기

next/head 모듈에 있는 <Head> 컴포넌트를 사용하면 페이지 별로 title 같은 메타 데이터를 다르게 설정할 수 있다.

예제

// index.js
<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

// first-post.js
import Head from 'next/head';

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Third-Party JavaScript

서드파티 js 라이브러리를 불러올 때 아래와 같이 head 태그 안에 불러 올 수 있다.

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

위 방식도 작동은 하지만 같은 페이지의 js 코드가 언제 로드 되는지에 대해 명확히 알 수 없어 권장되는 방식은 아닙니다. 특히 특정 스크립트가 렌더링을 차단중이고 페이지 콘텐츠 로드를 지연시킬 수 있는 경우, 성능이 저하될 수 있습니다. 때문에 위 방식 대신 next/script 모듈의 Script 컴포넌트를 사용하는 것이 좋습니다.
```
// Script 태그 사용하기 위해 불러오기
import Script from "next/script"

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}
```
- strategy : javascript를 로드해야 하는 시기를 정합니다. lazyOnload 값을 넣으면 브라우저 대기 시간 동안, 스크립트를 느리게 로드하도록 Next.js 에 지시합니다.
- onLoad : 스크립트 로드가 완료된 직후 JavaScript 코드를 실행하는 데 사용됩니다. 위 예시에서는 스크립트가 올바르게 로드되었다는 메시지를 콘솔에 기록합니다.