[NextJS] hard / soft navigationhard navigation- 전통적인 웹 애플리케이션에서 사용되는 일반적인 페이지 이동 방식이다.   사용자가 링크를 클릭하거나 URL를 직접 입력하여 페이지를 이동할 때 발생한다.soft navigation- Next.js의 클라이언트 사이드 라우팅 기능을 사용하여 페이지를 이동하는 방식으로,   next/link나 next/router를 사용하여 페이지 간의 이동을 처리한다.

Before you learn🔗 [NextJS] Sever Action🔗 [React] useState[NextJS] Pagination영상Code 처음 로딩 시 take에 적힌 수만큼 상품 리스트를 가져옵니다.현재는 등록된 총 상품 수가 2개 이므로,하나씩 가져오기 위해 take : 1 를 입력하였습니다. 가져온 상품 리스트들을 props로 컴포넌트에게 전달합니다.// app/products/page.tsximport ProductList from "@/components/product-list";import db from "@/lib/db";import { Prisma } from "@prisma/client";async function getInitialProducts() { // take에..

[NextJS] Skeleton (스켈레톤)영상 Code로딩 시 보여주고 싶은 페이지의 자식으로 loading.tsx (jsx) 파일을 만듭니다.loading.tsx(jsx) 파일을 만들면 Next.js가 알아서 로딩 시 동작합니다.// app/products/[id]/loading.tsximport { PhotoIcon } from "@heroicons/react/24/solid";export default function Loading() { return ( );} 로딩 시 화면을 보기 위해 setTimeOut을 사용하였습니다. 아래의 코..

Before you learn🔗 [NextJS] 이미지 삽입Error : Invalid src prop Next.js의 를 사용했을 때 자주 받는 에러 중 하나이다. 에러 메시지를 잘 읽어보면 친절하게도 해결책이 적어져 있다.Solution""(큰따옴표) 사이의 url를 next.config.js에 추가하면 된다.// next.config.js/** @type {import('next').NextConfig} */const nextConfig = { images: { remotePatterns: [ { hostname: "avatars.githubusercontent.com", // 큰따옴표 사이의 url 입력 }, ], }, reactStrictMode..