[Next] 1. 소개, 페이지 레이아웃 (Intro, Page layout)

HYl·2022년 4월 22일

0

Next.js

목록 보기

1/1

Next.js 소개

컴파일과 번들링이 자동으로 된다. (webpack 과 babel)
자동 리프레쉬 기능으로 수정하면 화면에 바로 반영된다.
서버사이드 렌더링이 지원된다.
스태틱 파일을 지원한다.

Static File Serving

Next.js는 root directory에서 public 폴더 아래에서 이미지와 같은 static file을 제공할 수 있다.

pubilc 안의 파일은 base URL / 로 시작하여 코드에서 참조할 수 있다.

Note: next/image requires Next.js 10 or later.

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

이 폴더는 또한 robots.txt, favicon.ico 등등 static 파일들에도(.html 포함) 유용하다.

주의할 점은, public 이름 이외의 다른 이름으로는 지정할 수 없다.

_app.js

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

_document.js

Custom document

only server rendered
event handlers 와 같은 onClick 을 사용할 수 없다.
<html>, <head />, <main /> 및 <nextscript />는 페이지가 올바르게 렌더링 될 때 필요하다.
props 를 사용할 수 있다.

<Html lang="en">
...
<body className="bg-white">

주의할 점

_document 에서 사용되는 <Head /> 는 next/head 로서 사용되는 <Head />와 동일하지 않다,
styled-jsx 같은 CSS custom을 추가할 수 없다
global components를 사용해야 할 때는, layout에 추가하여 _app.js에 추가하도록 한다

REFERENCE

꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글