이제 웹팩 바벨설정은 그만!
리액트를 하다보면, 웹팩과, 바벨등 부가적인 여러 설정때문에 결국 개발보다 설정하느라 시간 보내지 않아?
이를 해결해주는 리액트용 프레임웤이 있지!
바로 Next.js! 요게 벌서 9버전까지 나와있다구!
많은 기능들이 있지만 한마디로 정리하자면, "만들고 싶은 사이트를 가장 빠르게 만들어주는 프레임웤"이야.
1. 페이지 별로 URL을!
URL에 따라 또 서버에 링크 만들어 주어야 하기도 하고, URL을 어떤 규칙으로 할지 고민고민하지마! Next.js는 그냥 페이지별로 URL 정리해줍니다. 그래서 Framework!! 나만 따라와!
2020/05/30 - [React] - Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로)
2. 서버사이드 렌더링 지원!
가끔은 성능을 위해서 서버에서 페이지 전체가 완성된 마크업이 필요할때가 있어! 리액트는 그걸 못해서, 서버사이드 렌더링 할때면, 예전방식으로 서버에 템플릿엔진을 사용할수 밖에 없었지. ㅜㅜ 이제 그런 걱정은 노노!
서버에 설정하느라 들어간 시간 절약!
2020/05/28 - [React] - Next.js 킬포! Pre-rendering
3. 빠른 로딩을 위한 자동 코드 분할!
실환경(프로덕션) 결과물이 덩어리가 너무커서 웹팩 설정으로 삽질했던 기억있지? Next.js는 페이지에 필요한 코드를 자동으로 분할 딱 필요한 코드만 받아서 실행!
여기서 시간 또 절약!
4. 최적화된 프리패칭으로 클라이언트 라우팅!
2020/05/29 - [React] - Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering
5. CSS 걱정마!
CSS와 SASS, CSS-in-JS라이브러리 내장! CSS이것저것 설정한다고 이거써보고 저거써보고, 또 하루 날린경험 있지 않아?
스타일링에 CSS-in-JS를 도입하면서 스타일링도 하나로 결정!
2020/05/23 - [React] - Next.js 스타일링 하기
6. 개발중 실시간으로 결과 확인하는 기능은 잊지 않았지
- Hot Module Replacemnet 개발환경 제공
7. API 개발은 서버리스로!
- 서버리스 함수를 통한 API엔드포인트 빌드 해주는 API 라우트기능
2020/05/31 - [React] - Next.js - API 만들기 (API Routes)
8. Typescript는 기본내장 Zero-Config!
타입스크립트 설정이 기본으로 들어가 있어서 설정도 아주 간편!
Next.js 요약은 이정도인데 어때? 따라올 만한 기분이 들어?
튜토리얼 함께 따라해 보면서 미니멀한 블로그를 완성할텐데, 친구들도 모두 끝까지 성공하길 바래!
'Next.js9' 카테고리의 다른 글
Next.js 스타일링하기2 - 전역 스타일링/Global Styling (0) | 2020.05.24 |
---|---|
Next.js 스타일링 하기 (0) | 2020.05.23 |
Next.js 페이지 추가하기 (0) | 2020.05.23 |
Next.js 앱 처음으로 수정해보기 (0) | 2020.05.22 |
첫번째 Next.js 앱 만들기 (2) | 2020.05.14 |