nextjs14 [Nextjs] pathname 사용하기 레이아웃에서 pathname 활용레이아웃에서 URL 정보를 토대로 페이지별로 다르게 렌더링하고 싶은 경우가 존재한다. 예를들어 네비게이션에서 현재 페이지에 활성화 표시를 추가할 수 있다. 이러한 경우 pathname을 사용해야 하는 UI 부분만 클라이언트로 분리한다. 레이아웃에서 해당 컴포넌트를 import하여 추가한다. 레이아웃export default function Layout() { return ( // ... )} 클라이언트 컴포넌트'use client';import { usePathname } from "next/navigation";export default function Navigation() { const pathname = usePathname(); return.. 2025. 1. 19. 12. ISR 오늘 정리한 내용은 공식 문서 학습 후 정리한 내용입니다.🎈 소개ISR은 점진적 정적 재생성 또는 증분적 정적 재생성이라고 부른다. 사실 이 단어만 보면 전혀 와닿지가 않는다.ISR은 정적 사이트 생성과 서버사이드 렌더링을 결합한 기능이다. 빌드 시 일부 정적 페이지를 미리 생성 후 캐싱하여 사용자가 좀더 빠른게 접근할 수 있게 해준다. 이후 새롭게 업데이트 된 컨텐츠에 대한 요청이 발생하면 기존 정적 페이지를 보여주다가, 업데이트 완료되어 캐싱되면 이후 부터는 캐시에서 새로운 컨텐츠를 불러올 수 있게 된다. export const revalidate = 60export const dynamicParams = true export async function generateStaticParams() { .. 2024. 12. 26. 11. 서버 액션 오늘 정리한 내용은 공식 문서 학습 후 정리한 내용입니다.🎈 서버 액션 서버액션은 서버에서 실행되는 비동기 함수이다. 서버 및 클라이언트 컴포넌트에서 모두에서 호출할 수 있으며 폼 전송 및 데이터 변경에 활용된다.서버액션은 "use server" 지시어를 통해서 정의할 수 있다. 함수 또는 파일에 해당 지시어를 사용해 서버액션 정의할 수 있다. 비동기 함수 내부에서 지시어를 작성하면 해당 함수는 서버액션 함수가 된다.async function serverAction() { "use server"} 파일 최상단에 지시어를 작성하면 해당 파일에서 작성한 함수는 서버액션으로써 사용할 수 있다."use server";export const serverAction = async () => {} 서버 컴포넌.. 2024. 12. 24. 10. 데이터 페칭과 캐싱 오늘 정리한 내용은 공식 문서 학습 후 정리한 내용입니다. 🎈 서버 데이터 페칭데이터를 가져오기 위해서는 일반적으로 fetch API를 사용하거나 DB에 직접 접근해서 가져올 수 있다. 이 두가지 방법 모두 기본값은 캐싱을 사용하지 않는다. 아래와 같이 fetch API를 사용해서 데이터를 가져올 수 있다. 이때 next build를 통해 빌드를 하게 되면 아래 페이지는 정적 페이지로 프리렌더된다. 그래서 해당 페이지에 아무리 접근해도 더이상 fetch API가 호출되지 않기 때문에 매번 동일한 결과만 보인다. export default async function Page() { const data = await fetch('http://localhost:3000/blog') const posts.. 2024. 12. 16. 9. 미들웨어 오늘 정리한 내용은 공식 문서 정리입니다. 미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있다. 미들웨어 파일은 프로젝트의 루트 경로에 middleware.js 이름으로 생성하면 된다. 🎈 유스케이스인증 및 권한 부여 : 특정 페이지에 대한 접속 권한을 미들웨어에서 확인 후 접속을 차단하거나 허가할 수 있다.서버사이드 리다이렉트 : 특정 조건에 따라 서버 레벨에서 유저를 리다이렉트할 수 있다.봇 탐지 : 봇 트래픽을 감지하고 차단하여 리소스 보호가 가능하다.로깅 및 분석 : 모든 페이지 접속 전 미들웨어를 통하도록 설정할 수 있어 요청 데이터에 대한 분석이 가능하다. 👓 미들웨어에 어울리지 않는 상황복잡한 데이터를 가져오거나 조작 : 미들웨어에서직접 데이터를 가져와서 조작하는 목적으로 제.. 2024. 12. 9. 8. 리다이렉트와 라우트 핸들러 오늘 정리한 내용은 공식 문서 정리입니다. 🎈 리다이렉트Nextjs에서는 리다이렉트할 수 있는 다양한 방법을 제공한다. redirect 함수redirect 함수는 서버 컴포넌트, 라우트 핸들러, 서버 액션에서 사용 가능하다. 서버 액션 수행 후 다른 페이지로 이동 시킬 때 자주 사용된다. 307 상태코드를 반환한다.'use server' import { redirect } from 'next/navigation' export async function createPost(id) { // // create logic redirect(`/post/${id}`);} ✨ 서버 액션을 통해 제한적으로 클라이언트 컴포넌트에서도 사용이 가능하다. permanentRedirect 함수서버 컴포넌트, 클라이언트.. 2024. 12. 6. 이전 1 2 3 다음
