Next.js (9) 썸네일형 리스트형 [번역] Next.js 개발 생산성을 높이는 12가지 멋진 라이브러리 https://medium.com/lets-code-future/12-awesome-next-js-libraries-to-supercharge-your-development-38632f6ae6f3?sk=e1574e38f82e2c7076085b82a550538d 12 Awesome Next.js Libraries to Supercharge Your Development!👋 Hey there, fellow developers! I’m Sachin, and today, I’m bringing you a power-packed list of the 10 best Next.js libraries that will…medium.comLet's Code Future 님의 25.02.05일자 포스트 번역글입니다. 안.. [Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 ) 왜 이러는 지 한참을 삽질하다 이렇게 직접 tsx안에 적어주니 통과를 합니다...???? 이 때 깨달았습니다.@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고.... 아예 랜더링에서 막히고 있습니다... 랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다. 1. vite-plugin-svgr 설치npm install vite-plugin-svgr --save-dev 2. vitest.config.ts 에 vite-plugin-svg 추가// vitest.config.tsimport { defineConfig } from 'vitest/config'import react from .. [Next.js] redirect 함수, notFound 함수는 try/catch 밖에서 사용해야 합니다 1. Next.js의 redirect 함수는 특별한 타입의 에러(NEXT_REDIRECT)를 throw하는 방식으로 작동합니다. 2. try/catch 블록 안에서 redirect를 사용하면 redirect가 던진 에러가 catch 블록에서 잡혀버리고redirect 는 동작하지 않게 됩니다. 3. 클라이언트 컴포넌트의 경우, useRouter를 사용하는 것이 더 적절할 수 있음 4. 추가로 notFound() 함수도 아래와 마찬가지 패턴으로 처리해야 합니다. import { redirect } from 'next/navigation';// ... 생략 ... let isRedirect = false; try {// ... 생략 ... isRedirect = true; } catch (err.. [Next.js] Next.js의 환경 변수 파일 우선순위와 용도 1. 환경변수 로드 순서 : 우선순위 (높음 -> 낮음)시스템 환경 변수 .env.$(NODE_ENV).local .env.local (.env.test.local 제외) .env.$(NODE_ENV) .env $(NODE_ENV)는npm run devnpm run build / npm run startnpm test 에 따라 자동으로 할당되는 값이며 일반적으로 development, production, test 세가지 값을 가질 수 있습니다. 그래서 # 개발 환경에서 실행 시 우선순위1. .env.development.local2. .env.local3. .env.development4. .env# 프로덕션 환경에서 실행 시 우선순위1. .env.production.local2. .env.local3.. [Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리) Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다. 구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다. 'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다. 1. revalidatePath사용 목적특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.기본 문법revalidatePath(path, type?) - path : 데이터 캐시를 재검증할 url 경로- type : 'page' (디폴트 값), 'layout' 여기서 type은 두가지가 있는데 p.. [Next.js] react 와 next의 form submit 차이( Server Actions 시 ) 기존 react 에서 form 제출 시에는 export default function Signup() { function handleSubmit(e) { e.preventDefault() const formData = new FormData(e.target) console.log('formData', formData) const acquisitionChoices = formData.getAll('acquisition') const data = Object.fromEntries(formData.entries()) data.acquisition = acquisitionChoices } return ( Email .. [Next.js] react 와는 다른 이미지 import 방법 설명과 Image 컴포넌트 활용하기 Next.js에서 import로 이미지를 가져올 때, 해당 이미지는 객체 형태로 임포트됩니다. 이 객체는 다음과 같은 속성들을 포함합니다 src: 실제 이미지 경로height: 이미지 높이width: 이미지 너비기타 메타데이터그러므로 src={logo.src} 로 접근해야 하며,react 에서 사용했던 것 처럼 src={logo} 이런 식으로 작성할 경우 이미지 바인딩이 불가능하게 됩니다. import Link from "next/link";import logo from "@/assets/logo.png";export default function MainHeader() { return ( );} 더 나은 방법으로는 Image 컴포넌트를 사용하는 .. [Next.js] next 기초 1. App 라우팅 동적 라우팅 폴더명 기입방식 [folder]필수 파라미터입니다하나의 세그먼트만 매칭됩니다블로그 포스트, 제품 상세 페이지에 적합합니다[ ...folder ]최소 하나의 세그먼트가 필요합니다여러 세그먼트를 포함할 수 있습니다계층적 카테고리 구조에 적합합니다/shop/clothes (O) /shop/clothes/shirts (O)[ [ ...folder ] ]선택적 모든 것을 포함하는 라우트선택적 필터나 검색 파라미터가 있는 페이지에 적합합니다 이렇게 대괄호 표기를 하면 /blog/post-1 /blog/post-2 /blog/post-3 이렇게 동적으로 라우팅이 가능해진다.그리고 [folder] 안의 page.js 에서export default function BlogPo.. 이전 1 2 다음
