Next.js 문서보기

Next.js

Create a Next.js App

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

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

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

  1. 위의 4가지에 대한 해결책을 모두 제공해줌.
  2. 특징
    • 직관적인 페이지 기반의 라우팅 시스템(+다이나나믹 라우트 제공)
    • 프리렌더링이 지원됨.
    • 자동적으로 코드 스플리팅(더 빠른 페이지 로딩 지원)
    • 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

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

  1. 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

  1. [id].js파일을 만듦 . [로 시작하고 ]로 끝나는 이름을 갖는 페이지 ⇒ 다이나믹 라우트임
  2. export async function called ‘getStaticPaths’. 해당 함수는 id로 사용가능한 값을 반환한다.
  3. 마지막으로 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

좋은 웹페이지 즐겨찾기