서버 액션을 이용해 Infinite scrolling

app 폴더에 그룹화

(auth)
(taps)

→ / 페이지도 로그인에 관련한거라 들어가고, taps 는 로그인한 후 접근할 수 있는 페이지들 넣음

→ layout 은 그룹에 넣어두면 다른 그룹은 영향을 받지 않게 된다.

Skeletons

export default function Loading() {
  return (
    <div className="animate-pulse p-5 flex flex-col gap-5">
      <div className="aspect-square border-neutral-700 text-neutral-700 border-4 border-dashed rounded-md flex justify-center items-center">
        <PhotoIcon className="h-28" />
      </div>
      <div className="flex gap-2 items-center">
        <div className="size-14 rounded-full bg-neutral-700" />
        <div className="flex flex-col gap-1">
          <div className="h-5 w-40 bg-neutral-700 rounded-md" />
          <div className="h-5 w-20 bg-neutral-700 rounded-md" />
        </div>
      </div>
      <div className="h-10 w-80 bg-neutral-700 rounded-md" />
    </div>
  );
}

Product Component

8.3 Product Component · nomadcoders/carrot-market-reloaded@28d9994

어떤 사진이건 public 폴더에 두어야함

nextjs 에서 제공하는 이미지 컴포넌트

기본 jsx img가 지원하지않는 여러가지 강력한기능을 지원함

로딩 전후로 컴포넌트 위치가 밀리는 content shift 를 방지함.