본문 바로가기

Programing/Next.js28

API Route Handler + Supabase 8.7라우트 핸들러란?라우트 핸들러가 왜 필요한가?사용법API 라우트 생성src app api route.ts위와 같은 구조로 파일을 만들고 이름은 route.ts 또는 .js여야만 한다. 기본 사용법은 위와 같으나, 본인은 사용자 정보를 가져오는 동적 라우팅에서 사용할 동적인 라우트 핸들러를 만들어보겠다.src app api users [id] route.ts// app/api/users/[id]/route.tsimport { NextResponse } from 'next/server';import { supabase } from '@/lib/supabaseClient';export async function GET(request, { par.. Programing/Next.js 2024. 8. 7.
detail page 동적 라우팅 기본 패턴 상황API에서 데이터를 받아 오고 그 반환값으로 어떤 리스트를 렌더링 하는 경우, 그 렌더링 된 아이템 하나를 클릭하면 더 자세한 상세 페이지로 연결되는 것이 일반적인 user flow이다. 만약 쇼핑몰로 가정한다면 수천, 수만 개의 상품 정보가 있을 것이고, 상품명, 가격, 이미지... 등등의 정보가 반환값에 담겨 있다고 가정하자. 이럴 때 각각의 아이템에는 그 아이템을 식별할 수 있는, 겹치지 않는 고유값의 id가 일반 number든 uuid든 어떤 식으로도 겹치지 않게 설정되어 있을 것이다. 보통은 이러한 고유값을 하나의 세그먼트로 받아서 해당 아이템의 상세 페이지를 라우팅하게 된다.제품에 대한 상세페이지 뿐만 아니라 유저에 대한 프로필도 마찬가지다. https://ive.com/goods/1 이런.. Programing/Next.js 2024. 8. 6.
<Image> 컴포넌트 Image 컴포넌트란?Next.js 에서 제공하는 이미지 최적화 컴포넌트이다.Next.js 프로젝트에서는 태그를 사용하면 컴파일 에러가 발생한다. 런타임 환경에서 사용하는 데는 아무런 문제가 없지만, 이왕이면 Next.js에서 제공하는 컴포넌트를 써서 대역폭을 줄이고 최적화를 하라는 의미의 에러가 뜬다.Image 컴포넌트의 장점Image 컴포넌트를 사용하면 아래와 같은 장점이 있다.사이즈 최적화 : 브라우저에 적합한 크기의 이미지를 자동으로 제공하여 불필요한 대역폭 사용을 줄여 줌.포멧 최적화 : WebP와 같은 최신 이미지 포맷을 사용해서 파일 크기를 줄이고 로딩 속도를 향상시킴.반응형 이미지 : 다양한 해상도에 맞게 이미지를 자동으로 조절해 줌.레이아웃 보정 : 이미지가 로드되기 전에 공간을 예약.. Programing/Next.js 2024. 8. 5.
layout 컴포넌트 React.js에서 App 컴포넌트에서 했던 일을 Next.js에서는 layout 컴포넌트가 해주고 있다고 생각하면 된다. 프로젝트를 처음 생성하고 나면 src/app 폴더 하위에서부터 layout.tsx 컴포넌트가 만들어져 있을 건데,이곳에서 해당 레이아웃 컴포넌트가 있는 폴더 내부의 모든 파일들 (자식 요소들, children)에 대해서 공통된 레이아웃을 설정할 수 있다. 예를 들어 아래처럼 모든 페이지에 둥둥 떠있는 내비게이션 헤더를 만들 수도 있다. import Link from 'next/link';export default function Layout({ children }) { return ( 홈 ㅣ 로그인 {children} );} .. Programing/Next.js 2024. 8. 1.
<Link> 컴포넌트 넥스트에서는 컴포넌트와 useRouter() 훅으로 페이지 간 이동을 할 수 있다. import Link from 'next/link'function Home() { return ( Main Login )} 앵커 태그와 비슷한 형태로 되어 있는 것을 알 수 있다.Link 컴포넌트로 만든다고 해서 별도의 태그로 만들어지는 것이 아니라 개발자 도구에서 확인해보면 HTML 문서에서는 앵커 태그로 변환되어 있는 것을 확인 할 수 있다. 앵커 태그로 만들어져야 검색 엔진 크롤러가 페이지를 읽을 수 있기 때문에 그런 부분은 넥스트에서 잘 변환해주니 걱정하지 않아도 된다. 다만 Link 컴포넌트로 페이지 이동할 수 있는 링크를 만들어 놓으면 a 태그와는 다르게, 사용자의 뷰포트에.. Programing/Next.js 2024. 7. 31.

티스토리툴바