assets-metadata-css - NextJs

Assets

Nextjs는 이미지와 같은 정적 자산을 최상위 디렉토리 아래에 제공할 수 있다

공개 디렉토리 내 파일은 페이지와 마찬가지로 애플리케이션 루트에서 참조 가능
공개 디렉토리는 robots.txt 등 SEO에도 유용하다

최적화되지 않은 이미지

기본적으로 HTML에선 img 태그를 사용해 이미지를 화면에 업데이트한다

<img src="/images/profile.jpg" alt="Your Name" />

그러나 이러한 방법은 최적화를 위해 수동으로 처리해야함을 의미

다양한 화면 크기에서 이미지가 반응하도록 보장해야함
타사 도구 또는 라이브러리로 최적화해야함
이미지가 뷰포트에 들어올때만 로드해야함

이러한 문제에대한 솔루션으로 Nextjs는 문제점을 해결한 Image 컴포넌트 제공

이미지 컴포넌트와 이미지 최적화

Nextjs는 기본적으로 이미지 최적화를 지원한다

이를 통해 브라우저에서 webP와 같은 최신형식을 지원하는 경우 이미지 크기를 조정하고 최적화하여 제공
- 이렇게하면 뷰포트가 작은 기기에 큰 이미지를 전송하려하지 않아도 된다
Nextjs는 향후 이미지 형식을 자동으로 채택하여 해당 형식을 지원하지 않는 브라우저에 이미지를 제공할 수 있다
자동 이미지 최적화는 모든 이미지 소스에 작동한다
- 이미지가 외부 데이터소스에서 호스팅되는 경우에도 이미지를 최적화할 수 있다

이미지 컴포넌트 사용법

Next.js는 빌드 시 이미지를 최적화하는 대신 사용자가 요청할 때 온디맨드 방식으로 이미지를 최적화

정적 사이트 생성기 및 정적 전용 솔루션과 달리 10개의 이미지를 제공하던 천만개의 이미지를 제공하든 빌드시간이 늘어나지 않는다
이미지는 기본적으로 지연로딩
- 뷰포트 외부에 있는 이미지로 인해 페이지 속도가 저하되지 않는다
- 이미지는 뷰포트에 스크롤할 때 동적으로 로드된다
이미지는 항상 레이아웃 시프트를 피하는 방식으로 렌더링 된다
아래 코드는 이미지를 사용해 프로필 사진을 표시하는 예시
- 높이와 너비크기는 이미지와 동일한 가로 세로 비율로 원하는 렌더링 크기여야 한다

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"
  />
);

Metadata

<title> HTML 태그와 같은 메타데이터를 수정하려면 어떻게 해야할까?

<Head> 컴포넌트는 Nextjs에 내장된 리액트 컴포넌트
- 이를 통해 페이지의 <head>를 수정할 수 있다

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>
    </>
  );
}

외부 자바스크립트

일반적으로 타사스크립트는 분석,광고,고객지원 위젯등 처음부터 새로 작성할 필요가 없는 최신기능을 사이트에 도입되기위해 사용됨

서드파티 자바스크립트 추가하기

먼저 first-posts 파일에 script 추가

해당 스크립트는 페이스북 SDK
하지만 이러한 방식은 같은 페이지에서 가져온 다른 javascript 코드와 관련해 언제 로드될지 명확하게 알 수 없다
특정 스크립트가 렌더링을 차단해 페이지 콘텐츠 로딩을 지연시킬 수 있는 경우 성능에 큰 영향을 미칠 수도 있다

function FirstPost() {
  return (
    <>
      <div>FirstPost</div>
      **
      <script src="https://connect.facebook.net/en_US/sdk.js" />
      **
    </>
  );
}
 
export default FirstPost;

스크립트 컴포넌트 사용하기

위와같은 방식대신 스크립트 컴포넌트를 사용하자

stategy
- 스크립트가 로드되는 시기를 제어
- lazyOnload 값은 브라우저 유휴시간동안 특정 스크립트를 느리게 로드하도록 지정
onLoad
- 스크립트가 로딩이 완료된 후 즉시 Javascript 코드를 실행하는데 사용됨

function FirstPost() {
  return (
    <>
      <div>FirstPost</div>
      **
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() => {
          console.log("script가 성공적으로 로드되었습니다");
        }}
      />
      **
    </>
  );
}

Assets/Metadata/CSS