Next.js 무엇인가?

Loading...September 20, 2022

들어가기 앞서

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs
https://nextjs.org/learn/basics/create-nextjs-app
https://nextjs.org/learn/basics/assets-metadata-css/assets
을 정리한 블로그 입니다.

개념

A flexible React framework that gives you building blocks to create fast web applications.

Blocks

  • User Interface - how users will consume and interact with your application.
  • Routing - how users navigate between different parts of your application.
  • Data Fetching - where your data lives and how to get it.
  • Rendering - when and where you render static or dynamic content.
  • Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
  • Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
  • Performance - how to optimize your application for end-users.
  • Scalability - how your application adapts as your team, data, and traffic grow.
  • Developer Experience - your team’s experience building and maintaining your application.

React

User Interface를 해결하기위한 Library

Next.js

User Interface 외 나머지 것들을 다룬다
image

특징

page-based routing system

directory 기준으로 url path가 만들어 지고 file 이름에 따라 resource 이름이 정해진다.
(dynamic routing도 물론 가능)

다양한 Rendering 지원

Pre-rendering, static generation, server-side rendering 지원하여 페이지 특성에 맞게 rendering 가능

code splitting 기본 탑재

개발자가 code splitting에 많은 시간을 투자해야하는데, 자동으로 해주어서 편리

Prefetching

<Link/> 컴포넌트가 viewport에 보인다면, 자동으로 prefetch를 해주어서 클릭 시 빠르게 렌더링 가능

Image Optimization

image를 노출 할 때 몇가지를 고려해야한다.

  • 스크린 크기 많게 반응형
  • lazyload or not
    이런 것들을 <Image/> 컴포넌트에서 쉽게 설정이 가능하다
    (default: lazy loading)

마무리

Rendering을 자유롭게 선택할 수 있어서 좋은거 같다
Tutorial에 따라 실습해보고 얼마나 잘되어 있는지 확인해보자