Router redirect 기능처럼 컴포넌트에서 버튼을 클릭해서 동적 라우팅을 구현할 수 있다. 참고로 app 내부의 컴포넌트는 서버 컴포넌트 이기 때문에 사용자가 클릭해서 클라이언트 라우팅을 시키려면 버튼 컴포넌트는 따로 클라이언트 컴포넌트로 빼줘야 한다. 예시 코드 products 상세페이지 서버 컴포넌트 src/app/products/[item]/page.tsx import { Metadata } from "next"; import React from "react"; import { typesOfItem } from "@/app/shared/const"; import { getProduct } from "@/service/products"; import { notFound, redirect } f..
Redirects 리다이렉트 기능, 컴포넌트 내에서 사용하던 redirect 함수와는 다르다. 물론 기능 자체의 개념은 같다. 웹 페이지를 캐시 해둔 모든 곳(클라이언트 및 검색 엔진)에서 혼란스러운 상황을 방지할 수 있도록 활용한다. 라우트별 리다이렉트 기능은 next.config.js 에서 설정해줄 수 있다. /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { dirs: ["src"], }, images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", }, ], }, async redirects() { return [ { source: "/..
API Routes(12ver) == Route Handlers (13ver) ? Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. (라우트 핸들러스는 Request 와 Response 웹 API를 활용하여 주어진 경로에 커스텀 요청 핸들러를 만들게 해준다.) => 즉, next 를 활용해서 풀스택 프로젝트를 구현할 수 있다는 부분은 이 기능이 제공되기 때문인 거 같다. next 12버전의 API 라우트와 13버전의 라우트 핸들러스가 같은 키워드 같아서 적어놨다. 아래의 next 공홈에서 가져온 good to know 에서 유추한 내용이다. Go..
넥스트 13버전의 docs인 Using App Router 에는 ISR 이라는 키워드를 직접적으로 찾을 수 없었다. 정의를 알고싶다면 Pages Router ( Next 12) 에서 검색해보면 된다. App기반 docs에서 ISR을 검색하면 Data fetching 과 관련된 내용이 나오는데 revalidate 라는 키워드와 직접 연관이 있기 때문인 거 같다. Next 에서는 Time-based Revalidation 라고 명시되어 있는데 이 키워드가 ISR과 동일한 개념인 거 같다. ISR(Incremental Static Regeneration) Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 업데이트할 수 있다. 증분 정적 재생성(ISR)을 사용하면 전체 사이트를 다시 빌드할 필..
우선 간단히 넥스트 12버전과 13버전을 비교하면 아래와 같다. Next 12ver 페이지 단위 렌더링 방식 규정 => 13버전보다 구성이 심플할 수 있으나 효율성이 떨어질 수 있음 Next 13ver 컴포넌트 단위 렌더링 방식 규정 => 12버전보다 구성하는 것이 복잡할 수 있으나 어플리케이션 효율성이 높음 리액트 18버전부터 Server Component가 도입되면서 페이지 내에 2가지 컴포넌트가 믹스되어 구성될 수 있음(클라이언트 & 서버 컴포넌트) 서버 컴포넌트(Server Component) app 폴더 내부에 있는 컴포넌트들은 기본적으로 서버 컴포넌트(서버에서 실행되는 컴포넌트)이다. 서버 컴포넌트는 말 그대로 서버에서 실행되는 컴포넌트 이기 때문에 이 컴포넌트는 브라우저에서 그려지는 것이 아..
- Total
- Today
- Yesterday
- Prittier
- 타입스크립트 DT
- 타입스크립트 장점
- nvm 설치순서
- text input pattern
- fs모듈 넥스트
- nvm경로 오류
- && 셸 명령어
- ~ ^
- D 플래그
- 형제 요소 선택자
- 원티드 3월 프론트엔드 챌린지
- is()
- aspect-ratio
- 틸드와 캐럿
- 프리온보딩 프론트엔드 챌린지 3월
- getServerSideProps
- 원티드 FE 프리온보딩 챌린지
- float 레이아웃
- 프리렌더링확인법
- 항해99프론트
- grid flex
- 부트캠프항해
- 항해99추천비추천
- 항해99프론트후기
- tilde caret
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- reactAPI
- 원티드 프리온보딩 FE 챌린지
- getStaticPaths
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |