🖤 Next.js

GitHub에 올릴 Next.js 프로젝트를 처음부터 설정하려면 다음 과정을 따르면 된다.package.json에서 아래와 같이 변경한다.Next.js 프로젝트를 GitHub에 올릴 때 node_modules/ 폴더가 너무 많아 푸시가 안 되는 문제를 방지하기 위해 .

렌더링은 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업.브라우저는 JavaScript 코드를 바로 이해하지 못하므로, React 코드를 HTML로 변환해줘야 함.Next.js는 이 작업을 서버에서 미리 해주는 SSR(Server Side Re

useState를 이용해 데이터를 저장할 공간을 만든다.useEffect를 사용해 컴포넌트가 마운트될 때 데이터를 가져온다.fetch()를 사용해 API 요청을 보낸다.response.json()으로 응답을 JSON으로 변환한다.setState()를 통해 상태를 업데이

Next.js 15에서 강의 코드를 그대로 따라 작성했지만, 아래와 같은 타입 오류가 발생함:Next.js 15부터 generateMetadata, page.tsx 등에서 정해진 구조의 props를 기대하며,내부적으로 PageProps<T> 같은 형태로 타입 체크

Next.js 15.2.4에서 npm run build 실행 시 다음과 같은 타입 오류(Type error) 발생:Next.js 15.1 버전부터 App Router에서 params와 searchParams가 비동기(Promise 기반) 로 처리되도록 변경되었다.이로

처음에 작성한 코드:이 구조가 처음 보면 헷갈릴 수 있다.“params는 id로 받는다?”“string으로 받으라는 건 무슨 의미지?”이런 의문이 들 수 있는데, 사실 이건 함수 매개변수에서 구조분해 할당과 타입 선언을 한꺼번에 적용한 예이다.자, 그럼 이 구조를 하나

Next.js에서는 URL 경로에 있는 동적 세그먼트 값(예: /movies/\[id])을라우트 파일에서는 params로 자동 전달받을 수 있지만,내가 만든 일반 컴포넌트에서는 직접 props로 전달해줘야 해당 값을 사용할 수 있다.\[id]는 파일 구조에서 라우팅 파

처음에는 강의에서 알려준 대로 아래처럼 수동으로 Next.js 프로젝트를 구성했다:그리고 package.json을 아래처럼 수정했다:이 방식은 모든 구조와 설정을 직접 만져보면서 학습할 수 있다는 장점이 있었다.하지만 실제 협업 프로젝트에 들어가면서 여러 치명적인 단점

| 질문 | 확인 방법 | 확인 기준 | | --- | --- | --- | | ✔ Would you like to use TypeScript? | 프로젝트에 tsconfig.json이 있는지 확인 | 있으면 TypeScript 사용 (.ts, .tsx 파일도 같이 사용됨) | | ✔ Would you like to use ESLint? | packag...

코드 포맷터내가 작성한 코드를 일정한 규칙에 맞게 자동으로 정리해주는 도구이다.팀원 간 코드 스타일 통일저장할 때마다 자동 정리 → 시간 절약리뷰 때 불필요한 스타일 논쟁 줄어듦설정 전용 파일을 루트 디렉토리에 만들어서 사용파일명 예시: .prettierrc, .pre

npx create-next-app로 프로젝트를 만들면서 Tailwind CSS를 선택했더니, postcss.config.mjs가 자동으로 생성되었고, 그 안에는 다음과 같은 설정이 있었음그런데 기존에 공식 문서나 블로그에서 봤던 예제들은 대부분 이랬다:내가 봤던 예제