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 폴더 내부에 있는 컴포넌트들은 기본적으로 서버 컴포넌트(서버에서 실행되는 컴포넌트)이다. 서버 컴포넌트는 말 그대로 서버에서 실행되는 컴포넌트 이기 때문에 이 컴포넌트는 브라우저에서 그려지는 것이 아..
[ 상황 설명 ] next 13으로 404 페이지를 설정하고 있던 중 개발자도구의 콘솔에 404 error 가 지속적으로 찍히는 것을 확인했다. 개발 환경의 hot reload 기능 때문인 거 같았는데 설마 서버의 요청도 계속해서 가고있는지 확인해보니 404페이지가 UI에 표시된 상태라면 api 요청이 계속적으로 되고 있었다. [ 원인 분석 ] 즉, 없는 경로를 서버에 요청보내면 not found 에러가 발생하는데 개발환경에서 해당 요청을 클라이언트에서 hot reload 를 통해 계속해서 보내고 있는 것이다. 핫리로드 문제는 개발환경에서만 발생하기 때문에 큰 이슈는 아니라고 생각했지만 혹시라도 문제가 될까봐 관련 이슈에 대해서 찾아봤다. [ 결론 ] next 공식 repo를 확인하니 나와 같은 next..
넥스트 13은 Node 16.14 이상의 버전을 요구한다. 지원 운영체제로는 맥, 윈도우즈, 리눅스가 있다. 프로젝트 자동 설치(수동 설치도 있음) npx create-next-app@latest 위의 명령어를 통해서 자동 셋업해주는 prompts 내역을 확인할 수 있다. 현재경로에 하위 폴더로 새로운 이름이 아닌 그냥 현재경로 폴더를 root로 사용하고싶다면 질문 prompt에서 프로젝트 명을 . 로 root를 의미하는 dot을 찍어주면 된다. 필요 종속성들을 설치할 수 있는데, 2023-08-22 기준 Typescript, ESLint , Tailwind CSS 가 기본값으로 내장되어 있다. src 폴더에 내 코드들을 root의 config 폴더들과 구분하여 사용할 수 있다. ⇒ 리액트랑 같은 듯 🤠..
Next.js에서의 환경 변수 raect.js 로 개발했을 때 환경 변수를 추가하기 위해서 .env 로 시작하는 파일을 만들어 선언하고 그 파일 안에 특정 네이밍 규칙(prefix)을 통해 환경 변수를 선언해서 사용했다. Next도 비슷하게 동작한다. 하지만 Next.js는 서버 사이드에서 동작하는 특징을 가지기 때문에 이를 고려하지 않고 아무런 네이밍을 통해 환경 변수를 선언하면 반응하지 않는다. Next.js에서 환경 변수를 설정하고 배포할 때에는 다음과 같은 주의사항이 있다. 환경 변수의 이름 환경 변수의 이름은 `NEXT_PUBLIC_` 접두어(prefix)를 붙여야 클라이언트 측에서 접근할 수 있다. 이 접두어가 붙은 환경 변수는 자동으로 노출이되며, 다른 변수들은 서버 측에서만 접근이 가능하다..
😉 2022 11 02 기준, 최근 Next 13버전이 대규모 업데이트를 했습니다. 저는 공식 홈페이지의 튜토리얼을 참고하고 있기 때문에 create-next-app으로 자동 설치됐던 next 13버전을 12버전으로 다운그레이드하여 사용했습니다. yarn 을 통한 패키지 다운그레이드 방법 yarn upgrade 패키지명@버전 yarn upgrade next@12.2.2 // upgrade 대신 add도 된다. Next.js 는 React로 SSR이 가능하게 도와주는 프레임워크입니다. Next에서는 퓨어한 React에 비해 많은 기능을 내부에 포함(폴더기반 라우팅 기능, Express.js 코드 스플리팅, 이미지 최적화 등)하고 있습니다. 세팅하고 시작하는 방법에 대해서는 언급하지 않겠습니다. Next.j..
- Total
- Today
- Yesterday
- float 레이아웃
- fs모듈 넥스트
- grid flex
- 항해99추천비추천
- Prittier
- 프리렌더링확인법
- 부트캠프항해
- getServerSideProps
- text input pattern
- reactAPI
- 항해99프론트후기
- D 플래그
- 타입스크립트 장점
- ~ ^
- tilde caret
- 원티드 프리온보딩 FE 챌린지
- 원티드 FE 프리온보딩 챌린지
- is()
- getStaticPaths
- nvm경로 오류
- nvm 설치순서
- 프리온보딩 프론트엔드 챌린지 3월
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 틸드와 캐럿
- && 셸 명령어
- 원티드 3월 프론트엔드 챌린지
- 항해99프론트
- aspect-ratio
- 타입스크립트 DT
- 형제 요소 선택자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |