리액트로 웹 어플리케이션을 만들기 위해서 고려해야 할 점이 많습니다.
- 바벨과 같은 컴파일러와 웹팩과 같은 번들러를 사용해야 합니다.
- 코드 스플리팅과 같은 프로덕션 최적화를 해야합니다.
- 어떤 페이지의 성능과 SEO을 위해 Statically Pre-render하고 싶을 겁니다.
- SSR 또는 CSR을 사용하고 싶을 겁니다.
- 데이터 저장소에 리액트앱을 연결하기 위해 Server side 코드를 써야 할 겁니다.
프레임워크는 이런 문제를 해결해줄 수 있습니다. 하지만 이러한 프레임워크는 적절한 추상화를 해야 하고 그렇지 않으면 이것은 유용하지 않을 겁니다. 당신의 팀에게 코딩을 하는 동안 좋은 경험을 주기 위해 멋진 개발자 경험을 제공해야 하는 것 또한 필요합니다.
Next.js: React 프레임워크
Next.js는 위와 같은 모든 문제의 해결책을 제시하고, React 어플리케이션을 만들면서 성공의 길로 당신의 팀을 인도한다는 것이 중요합니다.
Next.js는 최고의 제품을 만드는 개발자 경험과 많은 빌트인 기능을 갖는 데 초점을 맞췄습니다.
- 직관적인 페이지 라우팅 시스템(다이나믹 라우트 지원)
- Pre-rendering (Static Generation(SSG), Server Side Rendering(SSR))를 페이지 단위로 지원합니다.
- 빠른 페이지 로딩을 위해 자동 코드 스플리팅이 적용됩니다.
- 최적화된 Prefetching으로 클라이언트 사이드 라우팅이 제공됩니다.
- 빌트인 CSS와 Sass, CSS-in-JS 라이브러리도 지원합니다.
- 빠른 리프레시를 지원하는 개발 환경
- 서버리스 펑션 API 엔드포인트를 만들기 위한 API Routes
- 완전히 확장가능한 프레임워크
Next.js 는 많은 대형 브랜드들을 포함한 수 많은 프로덕션 웹사이트들과 웹 어플리케이션들이 사용하는 프레임워크입니다.
이 튜토리얼에 관하여
이 무료 코스는 Next.js를 어떻게 시작하는지 안내합니다. 이 튜토리얼에서는 당신은 간단한 블로그 앱을 만들면서 기초를 배우게 됩니다. 아래는 최종 결과물입니다.
자 그럼 이제 시작합니다.
공식 문서를 찾는다면, 공식 문서 방문하기로 이동하세요.
이 튜토리얼은 자바스크립트와 React에 기초 지식이 있는 것으로 가정합니다. 당신이 만약 React 코드에 익숙하지 않다면 먼저 리액트를 배우고 오시는 것을 권장합니다.
Setup
먼저, 당신의 개발 환경을 준비합시다.
- Node.js가 설치 되어있지 않다면 여기에서 설치하세요. (Node.js 버전은 10.13 이상이 필요합니다.)
- 이 튜토리얼을 위해 텍스트 편집기나 터미널앱을 사용해야 할 겁니다.
Create a Next.js app
Next.js 앱을 만들기 위해서 터미널을 열고, 앱을 만들고자 하는 디렉토리로 이동해 이 커맨드를 입력하세요
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"