개발 일지

현재 팀 내에서 ESLint Airbnb 컨벤션을 따르고 있다. Github Action으로 PR 템플릿이 열릴때마다, 그리고 오픈된 PR 에 새로운 커밋이 추가될 때마다 Docker local build를 실행하고 있는데, lint 설정에 오류가 있으면 build가 실패처리 된다. build가 성공해야 PR을 close 할 수 있기 때문에, 빌드시 lint 설정을 끌 수 있는 방법을 알아보자. 먼저, 다음의 명령어로 로컬 환경에서 lint 검사를 수행한다. next lint * 일반적으로 next production build 시 ESLint 오류가 감지되면 빌드가 실패한다. next.js 공식 홈페이지에서 다음과 같은 방법을 안내하는데, 이미 워크플로우의 별도 부분(예: CI 또는 pre-commit..

Redirects 유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다. next.config.js 에서 redirect를 설정할 수 있다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ]; }, }; 리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다. source : 유입되는 요청 경로 패턴 destination : 라우팅하려는 경로 permanent : true / false true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우..

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다. ** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의) (대표적으로 App Router에서는 Custom App 이 없습니다.) Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다. 즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다. App 컴포넌트를 사용해..

1. CSS Modules Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다. CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다. 이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다. (사용예시) Nav.tsx import { useRouter } from "next/router"; import Link from "next/link"; import styles from ".//Nav.module.css"; export default function Nav() { const router = useRouter(); return ( Home Detail ); } Nav.mo..

1. next.js 설치 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 설치 명령어 입력시 아래와 같이 세팅 항목들을 설정할 수 있다. yarn create next-app yarn create v1.22.17 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-next-app@13.3.0" with binaries: - create-next-app ✔ What is your project na..