Next.js 문서보기

이진희·2022년 4월 16일

Next.js

Create a Next.js App

리액트를 빌드할 때 해야하는 것

웹팩같은 번들러로 번들링, babel같은 컴파일러로 commonJS형태로 변환
코드 스플리팅 같은 최적화가 필요함.
성능과 SEO를 위해 pre-render이 필요하고 그와 동시에 SSR 또는 CRS필요
data store에 웹 앱을 연결시키기 위해 몇몇 서버사이드 코드를 작성해야 할 것.

Next.js : 리액트 프레임워크

위의 4가지에 대한 해결책을 모두 제공해줌.
특징
- 직관적인 페이지 기반의 라우팅 시스템(+다이나나믹 라우트 제공)
- 프리렌더링이 지원됨.
- 자동적으로 코드 스플리팅(더 빠른 페이지 로딩 지원)
- Built-in CSS, Sass , CSS-in-JS 지원
- 개발환경에 빠른 새로고침을 제공
- 서버리스 기능으로 API 엔드포인트를 구축하는 API 라우팅

Blog 만들기 예제

Navigate Between Pages

📖 * 새로운 페이지 생성(파일 시스템 라우팅) * Link 컴포넌트 사용법(클라이언트 사이드 네비게이션) * 코드 스플리팅과 프리패칭(데이터 미리 불러오는 거)를 위한 기본적인 지원 기능

Pages in Next.js

파일 이름에 기반해 라우팅 됨. 즉, pages폴더 안에 원하는 대로 파일 구성해주면 됨.
컴포넌트는 아무 이름이나 써도 되지만, export default 형태로 꼭 export해주어야 함.

ex. 
1. 'pages/index.js'는 '/' 라우트
2. 'pages/post/first-post.js'은 '/posts/first-post'로 라우트.

Link Component

Link컴포넌트 === a tag.

href 속성에 route주소 알려주기.

import Link from 'next/link'

<Parent-Component>
	<Link href="/psots/first-post">go to page</Link>
</Parent-Component>

a태그 스타일을 입히고 싶다면 아래처럼
```
<Link href="/">
   <a>Back to home</a>
</Link>
```

Client-Side Navigation
- 클라이언트 사이드 네비 : 자바스크립트를 이용한 페이지 전환. 즉, 브라우저에 의해 실행되는 기본 네비게이션에 비해 빠르다.
- 자바스크립트를 이용 ⇒ 페이지의 모든 내용을 새로 가져오지 않음(실제 css background 지정하고 다른 페이지 넘겼다가 다시 오면 배경색 유지됨)
- a태그이용하면 브라우저가 fully-refresh할 것임.(로딩 속도에 별로 안좋겠져~)
Code splittnig and prefetching
- 자동적으로 코드 스플리팅이 됨.
- 각 페이지에 필요한 것만 로드함. ⇒ 빠른 로딩이 가능하게 함.
- 요청한 페이지의 코드만 로딩하므로 페이지는 다른 페이지와 분리되어 있음 ⇒ 특정 페이지가 에러를 발생시키더라도, 어플리케이션의 나머지 부분은 여전히 동작함.
- 프로덕션 빌드에서 Link 구성요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 자동으로 링크된 페이지의 코드를 백그라운드로 프리페치합니다.(넘어갈 페이지의 데이터가 프리페치되어 미리 준비되어 있다고 보면 됨)

Assets, Metadata, and CSS

css를 추가해봅시당~(CSS, sass 지원)

📖 * static file 추가하는 법(이미지/페이지 메타데이터 같은 거) * 각 페이지마다 안에 들어가는 내용 커스터마이징 * CSS Module을 이용하는 재사용가능한 리액트 컴포넌트 작성하는 법 * global CSS 추가하기(in pages/_app.js) * Next.js에서 스타일링하는 팁

Assets

‘public’폴더(가장 상위 레벨)에서 static assets 제공 가능
public폴더 안에 있는 파일들은 참조될 수 있음
public 디렉토리는 ‘robots.txt’(google site verification)에도 유용함

image

public/images/[내이미지] 저장
public이 static files의 root로, public안의 주소를 적어주면 됨.

  jsx
<img src="/images/[내이미지] "/>

그러나 위와 같이 그냥 img태그를 쓰면 생기는 문제점이 있음

다른 화면 사이즈에 대한 핸들링 해야함
써드파티 툴/라이브러리를 이용해 이미지 최적화 해야함.
이미지가 뷰포트에 있을 때만 로딩 됨

Image Component and Image Optimization

‘next/image’는 HTML의 img태그를 모던 웹애 맞게 확장시킨 것.
기본적으로 이미지 최적화를 제공함(resizing, optimizing, WebP같은 현대적 포멧으로 이미지 제공)
- ⇒ 작은 사이즈의 스크린에서 큰 이미지를 들고오지 않아도 됨
- ⇒ 차후 미래의 이미지 포맷을 자동적으로 적용할 수 있음.
외부 데이터 소스여도 자동적으로 최적화 해줌.

Using the Image Component

유저들이 이미지를 요청하면, 그 때 최적화가 진행된다(빌드될 때 최적화x ⇒ 이미지가 몇개든 빌드 시간은 변화가 없음.)
이미지는 기본적으로 ‘lazy loading’. 이미지가 뷰포트안에 들어왔을 때 로드됨.
Images are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital
that Google is going to use in search ranking(SEO에 유리한 방식으로 렌더링 됨)

Metadata

컴포넌트를 이용해 각 페이지의 metadata 수정 가능.

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Third-Party JavaScript

cdn으로 다른 라이브러리나 소스를 가져올 때
Script 컴포넌트 사용. <Script src=”link” / >로 들고옴.

<Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />

속성은 따로 봐야할 것 같음
1. strategy : 언제 써드파티 스크립트가 로드되어야 할 지 정함. 2. onLoad : 스크립트가 로딩을 끝낸순간 실행된다.

CSS Styling

styled-jsx : CSS-in_JS library
다른 css,scss 추가는 react 때랑 똑같이 하면 됨.
아래와 같이 사용해야 함!(css에 이름 붙여 import하고, className에는 css이름.사용할 클래스 로 지정해주어야 함)
이렇게 css modules를 이용하면 독창적인 이름을 알아서 지어줌.

// components/layout/layout.module.css
.container{
	max-width: 36rem;
	padding : 0 1rem;
	margin : 3rem auto 6rem;
}

// components/layout/layout.js
import styles from "./layout.module.css"

export default function Layout({children}){
	return <div className={styles.container}>{children}</div>
}

Global Styles

모든 페이지에 공통적으로 적용되기를 원하는 전역 css가 있다면?
pages/_app.js 파일 생성

import '..styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

이 _app.js에서 global CSS를 추가할 수 있다.(다른데선X) 단순히 import로 불러와주기만 하면 됨!

Using `classnames` library to toggle classes

(조건에 따라 클래스 바꾸기 위해서는 classnames 라이브러리 쓰는걸 춫천추천!)

[classnames](https://github.com/JedWatson/classnames) is a simple library that lets you toggle class names easily. You can install it using npm install classnames or yarn add classnames.

Please take a look at its documentation for more details, but here’s the basic usage:

Suppose that you want to create an Alert component which accepts type, which can be 'success' or 'error'.
If it’s 'success', you want the text color to be green. If it’s 'error', you want the text color to be red.

You can first write a CSS module (e.g. alert.module.css) like this:

.success {
  color: green;
}
.error {
  color: red;
}

And use classnames like this:

import styles from './alert.module.css'
import cn from 'classnames'

export default function Alert({ children, type }) {
  return (
    <div
      className={cn({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error'
      })}>
      {children}
    </div>)

Pre-rendering and Data Fetching

📖 * Next.js’ pre-rendering feature. * 프리 렌더링의 두 형태 : Staic Generation & Server-side Rendering. * Static Generation with data, and without data. * `getStaticProps` 사용 방법

프리 렌더링

Pre-render : next.js는 기본적으로 모든 페이지를 프리 렌더링하고 있다.(즉, Next.js는 사전에 각 페이지에 대한 HTML을 만들어 둔다.)
프리 렌더링 될 때 최소한의 js만 남기게 되고, 로딩될 때 js를 실행시켜 fully interactive하게 되어진다.(이 과정을 hydration이라고 함)

Two Forms of Pre-rendering

Static Generation: 빌드하는 동안 HTML을 생성하는 프리렌더링 방식. 프리렌더링된 HTML은 요청이 들어올 때 재사용된다.

Server-side Rendering: : 요청이 들어오면 각 요청에 대한 HTML을 만드는 프리렌더링 방식

Per-page Basis

Next.js는 각 페이지마다 어떤 프리렌더링 방식을 사용할지 정하게 한다.(페이지마다 다른 프리렌더링 방식을 사용할 수 있음)

When to Use Static Generation VS Server-side-rendering

Static-Generation 추천

일반적으로 Static Generation을 추천. HTML 한 번 만들어주고 재활용이 가능하고, CDN으로 제공해 속도가 빠름
아래와 같은 사이트에서는 Static Generation이 유리
- 마케팅 페이지, 블로그 포스트, 쇼핑몰 상품 리스트, Q&A, documentation ...
사용자의 요청 이전에 페이지를 미리 렌더링해둬도 된다 ⇒ Static Generation 사용!

Server-side rendering 추천

사용자의 요청 시에 그 요청 정보를 가지고 렌더링을 해야하는 경우라면, Server-side rendering을 추천!
데이터가 자주 업데이트되고, 요청마다 페이지의 내용이 바뀌는 경우에 Server side rendering
Static Generation보다는 느리지만 내용은 언제나 최신! 혹은 pre-rendering을 하지 않고 client-side js를 사용하는 방법도 있음.

Static Generation with and without Data

Static Generation의 경우에 데이터가 있어도, 없어도 가능.
외부 데이터 없이 제작 가능 ⇒ 그냥 앱이 빌드될 때 정적으로 HTML페이지가 생성됨.
어떤 페이지는 외부 데이터를 먼저 불러와야 렌더링이 가능한 경우가 있음 ⇒ 요건 getStaticProps를 사용해서 처리 가능(Data Fetching ⇒ Static Generation)

Static Generation with Data using `getStaticProps`

getStaticProps ⇒ async function.

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

Essentially, getStaticProps allows you to tell Next.js: “Hey, this page has some data dependencies — so when you pre-render this page at build time, make sure to resolve them first!”

---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---

Next.js has two forms of pre-rendering:**Static Generation** and**Server-side Rendering**. The difference is in**when** it generates the HTML for a page.

-**Static Generation** is the pre-rendering method that generates the HTML at**build time**. The pre-rendered HTML is then_reused_ on each request.
-**Server-side Rendering** is the pre-rendering method that generates the HTML on**each request**.

md맨 위의 -- -- 사이의 title과 date.는 metadata임
이것은 gray-matter라는 라이브러리로 파싱이 가능함.
*/

Pre-rendering and Data Fetching하는 곳 제대로 안봤음 주의해서 볼것!

내가 무조건 최신의 데이터를 들고올 필요는 없다 ⇒ server side rendering사용하면 되는데, 이 때는 getServerSideProps라는 함수를 이용해야 함.
Client-side Rendering의 경우 사용자의 요청에 따라 최신 검색이 필요할 경우인데,

SWR

SWR : 데이터 페칭을 위한 리액트 훅.
클라이언트 사이드에서 데이터를 패칭해야 할 경우 적극 추천! 약간 useQuery 훅 쓰는 거랑 비슷함. {data,error} = useSWR(’’,~) 이런식으로.

Dynamic Routes

Page Path Depends on External Data

page path가 external data에 의존하는 경우
그니까 이런거임
posts 폴더에 있는 컴포넌츠들 이름을 가지고 라우트
- path : /posts/ , 는 posts폴더에 있는 파일의 이름.

Overview of the Steps

[id].js파일을 만듦 . [로 시작하고 ]로 끝나는 이름을 갖는 페이지 ⇒ 다이나믹 라우트임
export async function called ‘getStaticPaths’. 해당 함수는 id로 사용가능한 값을 반환한다.
마지막으로 getStaticProps가 필요. → 주어진 id를 이용해 블로그 포스트에 필요한 데이터를 패치 . getStaticProps는 params를 제공함.

Dynamic Routes Details

Here is some essential information you should know about dynamic routes.

Fallback

getStaticPaths에서 return 내용에 {fallback:false}를 넣어서 보냈음. 근데 fallback이 머죠?
if fallback is false ⇒ 결과가 404인 path는 리턴X
if fallback is true, getStaticProps의 행동이 변함
- getStaticPaths에서 리턴된 paths이 렌더될 것임

Dynamic Routes 맨 마지막 페이지 덜함!~(22.02.19)

API Routes

Deploy

이진희

슬로우 스타터

이전 포스트

[React]UX, 최적화

다음 포스트

Next.js 문서보기

Next.js

Create a Next.js App

리액트를 빌드할 때 해야하는 것

Next.js : 리액트 프레임워크

Blog 만들기 예제

Navigate Between Pages

Pages in Next.js

Assets, Metadata, and CSS

Assets

image

Image Component and Image Optimization

Using the Image Component

Metadata

Third-Party JavaScript

CSS Styling

Global Styles

Using `classnames` library to toggle classes

Pre-rendering and Data Fetching

프리 렌더링

Two Forms of Pre-rendering

Per-page Basis

When to Use Static Generation VS Server-side-rendering

Static Generation with and without Data

Static Generation with Data using `getStaticProps`

Pre-rendering and Data Fetching하는 곳 제대로 안봤음 주의해서 볼것!

SWR

Dynamic Routes

Page Path Depends on External Data

Overview of the Steps

Dynamic Routes Details

Fallback

Dynamic Routes 맨 마지막 페이지 덜함!~(22.02.19)

API Routes

Deploy

[React]UX, 최적화

ㅌㅅ 과제 후기

0개의 댓글

Next.js 문서보기

Next.js

Create a Next.js App

리액트를 빌드할 때 해야하는 것

Next.js : 리액트 프레임워크

Blog 만들기 예제

Navigate Between Pages

Pages in Next.js

Assets, Metadata, and CSS

Assets

image

Image Component and Image Optimization

Using the Image Component

Metadata

Third-Party JavaScript

CSS Styling

Global Styles

Using classnames library to toggle classes

Pre-rendering and Data Fetching

프리 렌더링

Two Forms of Pre-rendering

Per-page Basis

When to Use Static Generation VS Server-side-rendering

Static Generation with and without Data

Static Generation with Data using getStaticProps

Pre-rendering and Data Fetching하는 곳 제대로 안봤음 주의해서 볼것!

SWR

Dynamic Routes

Page Path Depends on External Data

Overview of the Steps

Dynamic Routes Details

Fallback

Dynamic Routes 맨 마지막 페이지 덜함!~(22.02.19)

API Routes

Deploy

[React]UX, 최적화

ㅌㅅ 과제 후기

0개의 댓글

Using `classnames` library to toggle classes

Static Generation with Data using `getStaticProps`