💣 Next.js_01 Intro, Page layout

Bori·2022년 1월 2일

4

Next.js

목록 보기

1/12

Next.js

코딩앙마 Next.js 강의를 보고 정리한 내용입니다.

React 기반의 프레임워크
폴더 및 파일 기반으로 라우팅 지원
서버 사이드 렌더링을 지원
- 리액트는 서버사이드렌더링 구현이 어렵다.

$ npx create-next-app next.js-tutorial

# 설치 > 해당 폴더로 이동 > 실행 확인
$ cd next.js-tutorial
$ npm run dev

🔪 `create-next-app`으로 설치

컴파일과 번들링이 자동으로 된다.
- webpack, barbel
자동 리프레시 기능으로 수정하면 화면에 바로 반영
서버 사이드 렌더링 지원
스태틱 파일 지원
- Static FIle Serving

🔪 `pages` 폴더 안에 각 페이지를 만들면 된다.

다른 설정 필요 없이 pages 폴더 안에 js파일을 만들면 라이팅이 바로 적용된다.
- pages > about.js 파일 생성
- url(http://localhost:3000)에 /about을 작성하면 해당 페이지에 연결됨
  http://localhost:3000/about => about.js의 내용이 보여진다.
다이나믹 라우팅(동적 라우팅)도 지원
- pages > view 폴더 > [id].js 파일 생성
- http://localhost:3000/view/[id] : [id]부분에 어떤 문자를 넣어도 [id].js의 내용이 보여진다.

🔪 Semantic UI 이용

Semantic UI이란?

설치

$ yarn add semantic-ui-react semantic-ui-css
# Or NPM
$ npm install semantic-ui-react semantic-ui-css

설치 후 _app.js 파일 상단에 import "semantic-ui-css/semantic.min.css"; 추가해서 사용

🔪 `_app.js`

레이아웃을 만들기 위해서는 _app.js를 이용
- 모든 페이지는 _app.js를 통한다.
페이지 전환시 레이아웃과 상태값을 유지할 수 있다.
componentDidCatch를 이용해서 커스텀 에러 핸들링을 할 수 있다.
추가적인 데이터를 페이지로 주입시켜주는 것이 가능하다.
글로벌 CSS를 이곳에 선언한다.

// Props로 넘어온 `Component`는 현재 페이지를 의미
//  페이지 전환시 `Component` Props가 변경된다.
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

🔪 `_document.js`

Custom 'Document'
Next.js에서 제공하는 document를 커스터마이징할 수 있다.
Next.js 페이지들은 마크업 정의를 건너뛰고 페이지를 만든다
<html>, <head>, <body>등의 태그를 사용하기 위해서는 _document.js파일이 필수적이다

🔪 `_app.js` vs `_document.js`

_app.js와 _document.js는 역할이 다르다
_app.js
- 글로벌 CSS 적용하거나 레이아웃을 잡는 역할
- 모든 페이지에 적용되어야 하는 부분은 _app.js 파일에 사용해야 한다.
_document.js
- 서버에서만 렌더링 된다.
- onClick같은 이벤트 핸들러가 작동하지 않는다.
- CSS도 사용하지 않는다.
Head : _app.js에서 사용하는 Head와 _document.js에서 사용하는 Head는 다르다.
- title같은 속성을 넣을 때 _app.js에서 넣거나 각 페이지에서 Head를 import해서 사용
  => 왜 _document.js가 아니라 _app.js에서 사용하는지 이해못함
  (영상 나중에 설명해준다고 함)

다음 포스트

💣 Next.js_02 Dynamic Routes, next/link

5개의 댓글

2022년 1월 2일

게시글에서 살기가 느껴져요....

1개의 답글

2022년 1월 2일

다음글이 기대되는군요!

1개의 답글