Next.js

[ TIL ] Next.js에서 Link 사용하기

✍ React와 Next.js에서 란? React에서 react-router-dom을 이용할 때도 Link 태그를 사용했었다. : react-router-dom About 익숙한 모습이다. : Next.js Home {post.title} Blog Post . . . 다른 점이 몇 개 있다. 그 중 하나가 바로 a 태그이다. react에서는 페이지를 전환하는 과정에서 페이지를 불러오지 않고 페이지의 주소만 변경해야 하기 때문에 a 태그를 쓰지 않는다. 반면에 Next.js는 페이지 전환을 방지하는 Link 내에서 a 태그를 사용한다. Home Next.js Link 태그 안에 a 태그를 따로 쓰지 않더라도 HTML 마크업은 a 태그 안에 Home이 쌓여져 나온다 => a 태그를 Link 안에 넣지 않아도..

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing )

✍ Next.js에서의 라우팅 Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원한다. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Next.js는 파일 시스템 기반의 라우팅을 해준다 pages 경로에 파일을 추가하면 자동적으로 route할 수 있다 => Next.js 프로젝트..

[ TIL ] Next.js redirects와 rewrites로 API key 숨기기

✍ API KEY 개요 API 키(KEY) 는 인증(Authentication) 방식의 한 종류이다. API 키 이외의 인증방식으로는 API 토큰(Token) 방식이 있다. 특징 API 키는 특정 사용자만 알 수 있는 문자열이다. 개발자는 API 제공사의 페이지에서 키를 발급받아 호출 시 API 키를 이용하여 호출한다. 단점 모든 클라이언트가 같은 API 키를 공유하기 때문에 보안에 취약할 수 있다. ✍ next.config.js redirects와 rewrites는 둘 다 루트 디렉토리에 있는 next.config.js에서 사용할 수 있는 함수이다. next.config.js는 설정 파일로 클라이언트의 접근 경로를 우회하여 전송해주는 방법을 명시 / 설정하는 파일이다. 📌 redirects 다른 페이지..