next.js

pages, Pre-rendering

Pages Next.js에서 pages 디렉토리 아래 원하는 경로 명으로 디렉토리를 생성하고 index.js(jsx, ts, tsx) 파일을 생성하면 해당 경로로 진입할 때의 페이지를 구성할 수 있다. 아래 처럼 chicken 디렉토리를 만들고 index.tsx에 /chicken에 보여줄 컴포넌트를 작성할 수 있다. 또한 디렉토리 아래 [uri 파라미터 이름].js(jsx, ts, tsx)으로 파일을 성하면 dynamic routing을 할 수 있다 . 아래와 같이 디렉토리 구조를 잡는다면 /chicken 경로 뒤에 아무 이름이나 붙이면 [id].tsx가 렌더링된다 /chicken/123121312312, /chicken/gggg 는 모두 [id].tsx를 렌더링한다 Pre-rendering? Next...

Assets, Metadata, CSS

Assets(img, Image) next.js의 가장 상위에 있는 public 디렉토리에 프로젝트에 쓰일 static 데이터를 넣을 수 있다. 만약 public 아래 있는 image 디렉토리에 뚱이.jpg라는 파일이 있다면 아래처럼 img 태그에 사용할 수 있다. Image Component img 태그 대신 next.js에서 제공하는 Image 컴포넌트를 이용할 수도 있다. lint를 사용하면 img 엘리먼트 대신 Image 컴포넌트를 이용하라고 경고가 뜸! Image 컴포넌트의 장점은 view port에 보일 때만 이미지를 불러오도록 lazy loading을 할 수 있고 이미지 용량의 최적화, placeholder 제공 등이 있다. Local Image 로컬에 있는 이미지를 import해서 사용하는..

next.js 시작해보기

next.js가 뭐지 프론트엔드 개발을 공부하면서 next.js에 대해 들어봤지만 정확한 용도에 대해 알지는 못했다. 회사에서 next.js를 사용하기 때문에 이에 대해 잘 알아둬야 할 필요성이 생겨서 글을 남기면서 공부해보자! 하지만 누가 뭐라해도 공식문서가 최고이긴 하다! https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org https://nextj..