<aside> 💡 Loaindg, Error, Image, Font, Redirect, Rewrite, Middleware 등 기타 유용한 아이템들에 대해 알아보도록 하겠습니다.

</aside>

1. 로딩 UI

Page가 준비되기 이전에 사용자에게 로딩바를 보여준다던지, 무언가 준비중인 상태UI를 보여줄 수 있는 UI컴포넌트 입니다. 파일을 사용하면 자동적으로 React Suspense Boundary를 사용한 것과 동일합니다.

2. 에러 UI

https://github.com/0seo8/DreamCoding/commit/130725a8d56fc0ca653e6e2ad34c6af1ad630cfa

3. 이미지

1. 서버상의 이미지를 static하게 import해오는 방법

import Image from "next/image";
import clothesImage from "../../../public/images/clothes.jpg";

export default async function ProductsPage()
  const products = await getProducts();

  return (
    <>
      <h1>제품 소개 페이지!</h1>
      <Image src={clothesImage} alt="Clothes" />
      <ul>
        {products.map(({ id, name }, index) => (
          <li key={index}>
            <Link href={`products/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <MeowArticle />
    </>
  );
}

• 실제 이미지 크기보다 두배나 작은 것을 확인할 수 있습니다.
• srcset이 있는 것을 확인할 수 있습니다. 즉, 스크린 사이즈 별로 최적화 된 것을 확인할 수 있습니다.

→ 이렇게 일반 img태그가 아닌 next.js에서 제공해주는 <Image/>태그를 사용하는 경우 더 효율적으로 이미지 리소스를 최적화 할 수 있는 것을 확인 할 수 있습니다.

1. 외부 경로를 가지고 이미지를 보여주는 경우

import Image from "next/image";

export default function Home() {

  return (
    <>
      <h1>홈페이지다!!</h1>
      <Counter />
      <Image
        src="<https://images.unsplash.com/photo-1441986300917-64674bd600d8>"
        alt="clothes"
        width={400}
        height={400}
      />
    </>
  );
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

module.exports = nextConfig;