이제 웹팩 바벨설정은 그만!
리액트를 하다보면, 웹팩과, 바벨등 부가적인 여러 설정때문에 결국 개발보다 설정하느라 시간 보내지 않아?
이를 해결해주는 리액트용 프레임웤이 있지!
바로 Next.js! 요게 벌서 9버전까지 나와있다구!
많은 기능들이 있지만 한마디로 정리하자면, "만들고 싶은 사이트를 가장 빠르게 만들어주는 프레임웤"이야.
1. 페이지 별로 URL을!
URL에 따라 또 서버에 링크 만들어 주어야 하기도 하고, URL을 어떤 규칙으로 할지 고민고민하지마! Next.js는 그냥 페이지별로 URL 정리해줍니다. 그래서 Framework!! 나만 따라와!
2020/05/30 - [React] - Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로)
Next.js - 페이지 자동 생성하기 - Dynamic Routes (동적 경로)
지금까지 첫페이지에 블로그 제목 리스트가 나오도록 작성했지만, 각 페이지들을 만들지는 않았었어! 페이지들의 URL을 만들고, 요기 접속하면, 각각의 페이지가 나오는 실습을 할꺼야! 한마디��
ppsu.tistory.com
2. 서버사이드 렌더링 지원!
가끔은 성능을 위해서 서버에서 페이지 전체가 완성된 마크업이 필요할때가 있어! 리액트는 그걸 못해서, 서버사이드 렌더링 할때면, 예전방식으로 서버에 템플릿엔진을 사용할수 밖에 없었지. ㅜㅜ 이제 그런 걱정은 노노!
서버에 설정하느라 들어간 시간 절약!
2020/05/28 - [React] - Next.js 킬포! Pre-rendering
Next.js 킬포! Pre-rendering
안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지�
ppsu.tistory.com
3. 빠른 로딩을 위한 자동 코드 분할!
실환경(프로덕션) 결과물이 덩어리가 너무커서 웹팩 설정으로 삽질했던 기억있지? Next.js는 페이지에 필요한 코드를 자동으로 분할 딱 필요한 코드만 받아서 실행!
여기서 시간 또 절약!
4. 최적화된 프리패칭으로 클라이언트 라우팅!
2020/05/29 - [React] - Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering
Next.js 킬포 Pre-rendering 2. Server-side Rendering 그리고 Client-side Rendering
Pre-rendering중 하나인 Static-Generation은 저번시간에 실습해봤고, 이번엔 Server-side Rendering이야 Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고..
ppsu.tistory.com
5. CSS 걱정마!
CSS와 SASS, CSS-in-JS라이브러리 내장! CSS이것저것 설정한다고 이거써보고 저거써보고, 또 하루 날린경험 있지 않아?
스타일링에 CSS-in-JS를 도입하면서 스타일링도 하나로 결정!
2020/05/23 - [React] - Next.js 스타일링 하기
Next.js 스타일링 하기
내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫
ppsu.tistory.com
6. 개발중 실시간으로 결과 확인하는 기능은 잊지 않았지
- Hot Module Replacemnet 개발환경 제공
7. API 개발은 서버리스로!
- 서버리스 함수를 통한 API엔드포인트 빌드 해주는 API 라우트기능
2020/05/31 - [React] - Next.js - API 만들기 (API Routes)
Next.js - API 만들기 (API Routes)
이제 클라이언트 쪽은 알겠는데, API는 어떻게 만들까? Next.js에서 함수 하나로 API를 만들 수 있어! 엄청쉬워! 'pages/api' 디렉토리에다가 함수하나만 만들면 되! // req = 요청데이터, res = 응답 데이터
ppsu.tistory.com
8. Typescript는 기본내장 Zero-Config!
타입스크립트 설정이 기본으로 들어가 있어서 설정도 아주 간편!
Next.js - typescript 적용하기
요즘은 타입스크립트가 대세! 왜냐고 묻는다면, 바로 타입이기 때문이야. Javascript의 장점이자 단점이 명시적인 타입이 없다는 점이야. 즉흥적으로 객체에 필요한 멤버변수들을 추가하기때문에
ppsu.tistory.com
Next.js 요약은 이정도인데 어때? 따라올 만한 기분이 들어?
튜토리얼 함께 따라해 보면서 미니멀한 블로그를 완성할텐데, 친구들도 모두 끝까지 성공하길 바래!
첫번째 Next.js 앱 만들기
자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단
ppsu.tistory.com
'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 |
