[Next.JS] Page

 

 

NextJs Essentials

반드시 알아야 할 핵심 개념

 

1. Routing, Pages, Components
2. Fetching, Sending Data
3. Styling, Images, Metadata

 

---

 

Next.JS 설치

// 설치
npx create-next-app@latest

// 실행
npm run dev

 

 

 

폴더 구조 분석

app 폴더는 가장 중요하다.

app 폴더로 전체 웹사이트에 두고 싶은 다양한 페이지를 설정하는 곳이다.

해당 폴더에 page.js, layout.js가 존재한다.

 

page.js와 layout.js는 예약어이다.

• page.js는 페이지를 렌더링해야한다는 것을 알려준다.
  React 구조를 보인다.
  서버 컴포넌트라는 것이 주목할 점이다.

 

 

Components which require a special "environment"
NextJS provides such an environment

 

React Server Components - Rendered only on the server. Never on the client

 

 

그렇기 때문에 console.log를 작성해도 콘솔창에서 확인할 수 없다.

터미널에서 확인할 수 있다.

 

 

 

Route를 추가하는 방법

/about를 추가하고 싶다면,

 1. app 폴더 하위에 about 폴더를 생성한다.

 2. page.js를 파일을 추가한다.

 

 

 

 

Page별로 이동하는 방법

<a href="/about">About Us</a>

 

 

 

 

Server & Client-side Working Together

 

Server-side: The backend executes the server component functions & hence derives the to-be-rendered HTML code

 

Client-side: The client-side receives & renders the to-be-rendered HTML code

 

 

a 태그를 이용하게 되면 항상 페이지를 로드하게 되고, 페이지를 벗어나게 하기 때문에

Single Page Application이 아니게 된다.

 

 

NextJS에서 제공하는 Link 컴포넌트를 사용하자.

 

이전과 달리 페이지 이동을 해도 새로고침 아이콘이 크로스로 변하지 않는 것을 확인할 수 있다.

새로운 페이지를 로딩하는 것이 아니다.

 

뒤에서 다음 페이지의 콘텐츠는 여전히 서버에서 렌더링되지만, 클라이언트로 보내져 클라이언트 측 JavaScript

코드로 처리돼 화면에 보이는 것을 업데이트하게 된다.

 

 

 

page.js 와 layout.js

page.js: 파일이 페이지의 내용을 정의하는 곳

layout.js: 한 페이지 이상의 셸의 정의한다.

 

이름에서 알 수 있듯이 레이아웃을 통해 페이지가 렌더링된다.

1개의 루트 레이아웃 파일이 필요하다.

 

중첩된 레이아웃 파일도 가질 수 있다. 

ex) /about 디렉토리 하위에 생성 가능