[Next.js] (1) 기본 설정, 기능들

설치하기

공식문서를 보면 Setup(자동 설정)과 Manual Setup(수동 설정)이 있는 데 이번에는 Setup으로 프로젝트를 생성 했다.

$ npx create-next-app@latest next-practice

Getting Started | Next.js

---

설치 후 파일 구조 둘러보기

설치 후에 package.json을 확인 해보면 dependencies에 깔끔하게 설치 되어 있는 걸 볼 수 있고 WebPack 같이 중요한, 필수적인 라이브러리들은 next에서 알아서 관리 해주기 때문에 별도의 설정이 필요하지 않다.

package.json

next.config.js는 next에 필요한 설정들을 해줄 수 있는 파일이다.

next.config.js

전체적인 폴더 구조는 아래와 같다.

---

개발 서버 구동 시키기

next 프로젝트에서 개발 서버 구동(프로젝트 실행) 할 때는 터미널에 아래와 같이 입력하고

$ npm run dev

localhost:3000으로 접속하면 아래와 같이 실행 화면을 볼 수 있다.

---

Hot Reload

실행 화면은 index.js에 있는 내용들이 보여지고 있는 것이고,

index.js 파일에 내용들을 변경 후 저장을 하면 Hot Reload 기능에 의해서 즉각적으로 반영 되는 것을 볼 수 있다.

---

Routing 

next의 가장 큰 장점 중 하나는 Routing이 매우 쉽다는 점이다.

pages 폴더 안에 js 파일을 생성 할 때마다 해당 파일 이름이 곧 url 주소가 된다.

 

1. pages 폴더 안에 photos.js 파일을 생성한다.

 

2. localhost:3000에 /photos를 입력하면 별도의 route 설정 없이 페이지를 만들 수 있다.

(public 폴더에 있는 파일들에도 바로 접근 할 수 있지만

public 폴더에 파일을 만들면 모든 사람이 접근 할 수 있기 때문에 권장 하지는 않는다.)

 

---

Head, meta 태그 설정

 

next에서 제공하는 Head 컴포넌트를 사용하면 손쉽게 사이트 제목이나 meta 태그를 설정 할 수 있다.

---

Link

페이지 이동 시에는 a 태그를 사용 할 수 있지만 Next.js에서는 next에서 기본적으로 제공 해주는 link 컴포넌트를 import 받아와 Link 태그를 사용하는 것이 좋습니다. Link 태그 사용 시 Dynamic Routing, Pre-rendering 측면에서 유리합니다.

 

❓ Dynamic Routing이란?

동적 라우팅은 라우팅 테이블에서 경로의 현재 상태에 따라 경로를 자동으로 조정합니다.

동적 라우팅은 프로토콜을 사용하여 네트워크 대상과 도달하는 경로를 검색합니다.

 

(출처)

Dynamic Routing

 

❓ Pre-rendering이란?

SSR을 쓰면 접속 시 검색엔진에 유의미한 HTML 문서를 바로 받아 올 수 있다.

 

더이상 다운 받은 자바스크립트를 이용해 클라이언트에서 HTML 문서를 만드는 게 아니라

클라이언트에 보내주기 전에 이미 완성된 HTML 문서를 보내준다.

이를 NextJS에서는 Pre-rendering이라고 한다.

정적인 HTML 문서를 바로 받을 수 있어 SEO에 유리해진다.

 

다만 사용자가 HTML 문서만 다운 받은 뒤 클릭 등의 조작을 하더라도 반응할 수 있도록

기본적인 인터렉션을 위한 자바스크립트의 내용이 미니멀하게 HTML 문서에 포함된다.

그 다음으로 자바스크립트가 다운로드 완료되고 나서야 컴포넌트 변경 등의 인터렉션을 수행 할 수 있다.

 

(출처)

NextJS의 프리 렌더링(Pre-rendering)에 대해서

---