Next.js

Linklink는 래퍼 컴포넌트이다. href와 다른 라우팅 관련 props만 받아들인다. 스타일을 적용해야 한다면 하위에 있는 컴포넌트에 지정해야함(ex a tag)컴포넌트나 div등을 link안에 배치할 수 있다as: 브라우저에서 보여짐스타일링const Layout

서버사이드 렌더링(SSR)프레임워크로 검색엔진최적화빠른 초기 로딩 속도 새로고침시 화면 깜빡임이 없음pages 폴더는 라우터로 사용됨(구조짤때 신경써야함, 폴더 트리가 곧 주소창 경로)npx create-next-app-> 프로젝트명 기입cd 프로젝트명npm run d

데이터가 늦게 뜰때 로딩화면을 그려주기ex)

일반적으로 우리는 코드베이스는 하나만 관리하고, 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 어느 환경에 배포하는냐에 따라서 다르게 설정해야하는 항목은 보통 운영체제 레벨에서 환경 변수를 통해 관리하게 된다.대표적인 예로, 개발 환경에서는 로컬DB를

페이지 만드는것과 동일하게 api를 만들 수 있다./api/숫자 에 원하는 숫자를 치면 해당 숫자가 id: "숫자"로 나온다

index.js가 가장 기본 화면의 역할, 각 폴더명이 주소가 된다(http://localhost:3000)export default한 컴포넌트를 라우팅한다http://localhost:3000/ 주소뒤에 다른 폴더명이 주소가 됨각각 페이지가 될 부분

next/router로 이벤트를 감지해서 특정 이벤트가 발생하면 함수를 실행시킬 수 있다.routeChangeStart(url, { shallow })- 경로가 변경되기 시작할 때 발생routeChangeComplete(url, { shallow })- 경로가 완전히

보내는 컴포넌트받는 컴포넌트

tsconfig.json 파일에서 아래 설정

Next.js 13버전에서 구글 리캡차 사용하기 로봇이 아님을 인증하는 서비스 참고 레퍼런스

Next 13 에서는 기본적으로 모든 컴포넌트들이 서버 컴포넌트가 되었다. 즉 서버에서 렌더링과 API 호출 등이 이미 이루어지는 것이다클라이언트 사이드에서의 로직들을 수행하기 위해서는 컴포넌트의 최상단에use client를 사용하는것이 강제시 되었다use clent가