Next.js Intercepting Route 사용법 장점 언제 사용하면 좋을까?

Next.js 13 버전 이후 Interceptiong Route의 개념이 생겼습니다. Intercepting Route 란? 가로채기 Route 입니다. Next.js 에서 라우터를 가로채기를 하여 현재 레이아웃 내에서 다른 부분의 경로를 로드할 수 있습니다. 이렇게 하면 다른 전환 없이 내용을 표시할 수 있는 장점이 있습니다. 아래 장점과 같이 데이터 페치가 필요하거나, 인증 및 권한 보안 처리가 필요하거나, 동적 조건에 따라서 사용자 요청에 따라서 제어가 필요할 때 사용하면 좋습니다. 장점 데이터 가져오기 인증 및 권한 보안 처리 동적 조건에 따라 사용자 요청에 따라서 제어 가능 서버 리소스 효율 증가 사용법 아래와 같이 페이지 구조를 만들어서 사용 가능합니다. (.)의 같은 수준 디렉터리 (..)..

• format_list_bulleted Develop/Next.js
• · 2023. 12. 24.
• textsms

Next.js Parallel Routes(병렬 라우팅) 사용법

Next.js 13 이후 버전부터 app 디렉터리 방식으로 라우팅을 구현할 수 있습니다. 그중에 병렬 라우팅(Parallel Routes)에 대해서 알아보도록 하겠습니다. 병렬 라우팅이란? 하나의 레이아웃에 여러 페이지를 동시에 또는 조건부로 렌더링 할 수 있습니다. 주로 대시보드나 피드에서 여러 가지 레이아웃이 역동적인 페이지에서 사용할 수 있습니다. 모달창과 같이 하나의 레이아웃에 여러 페이지를 띄울 수도 있습니다. 또 인증 정보 등 조건에 따라서 렌더링을 할 수 있습니다. 병렬 라우팅을 사용하면 레이아웃마다 각각 오류 처리와 로딩 상태를 정의할 수 있는 장점이 있습니다. 사용법 slot name 을 이용해서 생성합니다. @folder 네이밍 컨벤션을 이용해서 slot를 생성합니다. layout.ts..

• format_list_bulleted Develop/Next.js
• · 2023. 12. 21.
• textsms

Next.js 에서 Socket.io 이용해서 실시간 채팅 만들기

Socket.io 란? 웹 어플리케이션에서 양방향 통신을 가능하게 해주는 라이브러리 입니다. Socket.io 라이브러리와 Next.js 프레임 워크를 이용해서 실시간 채팅을 구현 하겠습니다. 실시간 채팅 만들기 1. Next.js 프로젝트 생성 npx create-next-app Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나 powerku.tistory.com 2. axios, socket.io, socket.io-client 라이브러리 설치 npm install axios..

• format_list_bulleted Develop/Next.js
• · 2023. 11. 4.
• textsms

React - Timer 분/초/소수점 타이머 만들기

Next.js 에서 React와 TypeScript를 이용해서 타이머를 구현해보도록 하겠습니다. React Hook은 useEffect와 useMemo를 사용하였습니다. 1. 컴포넌트 렌더링 시 setInterval 함수를 통해서 1초 감소 2. setInterval 종료 3. 다시 재렌더링 이런 메커니즘으로 타이머가 진행 됩니다. 1분 이하에는 0.1초 단위로 시간이 내려갑니다. See the Pen React + TypeScript Starter by powerku (@powerku) on CodePen. 타이머 컴포넌트 timer.tsx const Timer = ({minute = 15, second = 0}: TimerProps) => { const [min, setMinute] = React.u..

• format_list_bulleted Develop/React
• · 2023. 11. 1.
• textsms

next-auth useSession getServerSession 동작 안할 때, 해결 방법

next-auth에서 클라이언트 컴포넌트에서는 useSession 서버 컴포넌트에서는 getServerSession을 이용해서 현재 로그인된 유저 정보를 알 수가 있습니다. 오류 1: Unhandled Runtime ErrorError: React Context is unavailable in Server Components 하지만 아래와 같이 페이지 내에서 async, await을 사용하려고 하니 아래와 같은 오류가 발생하였습니다. const Page = async () => { const session = useSession(); if (!session?.user) { redirect("/board"); } const user = await prisma.user.findUnique({ where: {..

• format_list_bulleted Develop/Next.js
• · 2023. 10. 28.
• textsms

next-auth 이용해서 10분만에 소셜 로그인 구현 하기

next-auth란? next-auth는 Next.js 프로젝트에서 소셜 로그인을 간단하게 구현할 수 있는 라이브러리 입니다. 국내에서는 구글, 카카오, 네이버, 페이스북, 애플 등 다양한 소셜 로그인을 이용하고 사용합니다. 해당 사이트가 늘어나면 늘어날 수록 로직은 달라지고 복잡해지는데 next-auth를 이용하면 한번에 쉽고 간단하게 구현 가능합니다. Next.js 프로젝트 구성하기 Typescript, tailwind, App Router 방식을 이용해서 구현할 예정입니다. 저는 shacdn이라는 라이브러리를 사용해서 버튼과 아바타 컴포넌트를 사용할 예정입니다. Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 ..

• format_list_bulleted Develop/React
• · 2023. 10. 26.
• textsms

Next.js 에서 sitemap.xml 만드는 방법

sitemap.xml 이란? 검색엔진 크롤러가 웹 사이트를 효율적으로 크롤링 하기 위해 정보를 작성해둔 파일입니다. 페이지 url, 최근 업데이트 날짜, 업데이트 주기, 우선순위 등을 작성합니다. Google에 자신의 웹사이트가 검색되기를 원하면 sitemap이 있으면 좋습니다. Next 13 에서 sitemap.xml 만들기 정적 sitemap 만들기 app/sitemap.xml https://powerku.tistory.com 2023-10-24T22:21:12+09:00 1.0 https://powerku.tistory.com/category 동적 stiemap 만들기 app/sitemap.ts import { MetadataRoute } from 'next' export default functi..

• format_list_bulleted Develop/Next.js
• · 2023. 10. 25.
• textsms

Next.js 설치하기 npx create-next-app

Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나하나 설치해서 직접 설정하는 두 가지 방법이 있습니다. 이번 글에서는 자동 설치에 대해서 알아보겠습니다. npx create-next-app을 이용하여 설치하기 1. 프로젝트 폴더를 생성할 폴더에서 커맨드창에서 아래 명령어를 입력합니다. npx create-next-app@latest 2. 프로젝트 구성 설정을 선택합니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like t..

• format_list_bulleted Develop/React
• · 2023. 10. 24.
• textsms

Next 13 서버 컴포넌트와 클라이언트 컴포넌트 SSR 차이점

Next.js 13 버전 이전에는 Page 폴더 내에서 라우팅을 하였습니다. 하지만 13 버전 이후에는 App 폴더 내에서 라우팅을 할 수 있는 새로운 개념이 생겼습니다. Next13에서 앱 라우터는 컴포넌트 단위로 Hydration이 가능할 수 있도록 변경되었습니다. Hydration이란? Next.js에서 미리 렌더링 된 HTML에 이벤트 리스너를 연결하고, 사용자와 상호 작용할 수 있도록 합니다. 서버 컴포넌트 Next13 버전에서는 기본적으로 서버 컴포넌트로 사용됩니다. 장점 데이터 페치 보안 캐시 자바스크립트 번들 감소 서버에서 바로 데이터에 접근하기 때문에 빠르고, 한번 조회한 데이터는 캐시로 가지고 있어서 성능이 우수합니다. 그리고 민감한 정보들을 클라이언트에서 볼 수 없어서 더욱 안전합니다..

• format_list_bulleted Develop/Next.js
• · 2023. 10. 7.
• textsms

Next.js 클릭 이벤트 적용이 안될때 해결 방법

아래와 같이 카운터 컴포넌트를 만들어서 사용하려고 하는데 버튼 클릭 이벤트가 작동하지 않아서, 원인을 찾아보았습니다. import {useState} from "react"; export default function Counter() { const [count, setCount] = useState(0) return ( Counter count: {count} setCount(count + 1)}>+ ) } 1. use client 추가 하기 next13 이후에는 기본적으로 서버 컴포넌트입니다. DOM 이벤트 또는 React 훅을 사용하기 위해서는 컴포넌트 상단에 use client를 붙여 줘야 합니다. use client 2. Node 16.14 버전 이상으로 버전 업데이트 next.js 는 최소 조..

• format_list_bulleted Develop/Next.js
• · 2023. 9. 29.
• textsms