[번역] Next.js 시작하기 1. Create a Next.js App

처음부터 React로 완벽한 웹 앱을 만들려면, 많은 세부사항들을 고려할 필요가 있습니다.

• 코드는 웹팩같은 번들러를 이용해 묶고, Babel 같은 컴파일러를 이용해 변환되어야 합니다.

• 코드 스플리팅과 같은 생산 최적화를 해야 합니다.

• 검색 엔진 최적화를 위해 정적으로 사전 렌더링을 원할 수 있습니다. 또한 서버 사이드 렌더링이나 클라이언트 사이드 렌더링을 원할 수 있습니다.

• 당신의 데이터 저장소에 리액트 앱을 연결시키기 위해 서버 사이드 코드를 작성해야 할 수도 있습니다.

  프레임워크는 이 문제들을 해결할 수 있습니다. 그러나 이런 프레임워크에는 올바른 추상화 레벨이 있어야합니다. 그렇지 않으면 이것은 별로 유용하지 않을 것입니다. 또한 대단한 "개발자 경험"이 있어야 코드를 쓰는 동안, 당신과 당신의 팀이 놀랄만한 경험을 할 수 있습니다.

Next.js: The React Framework

React 프레임워크인 Next.js에 들어오십시오. Next.js 는 상기한 문제들을 해결할 수 있는 솔루션을 제공합니다. 하지만 더 중요한 것은 React 앱을 만들 때 Next.js 가 당신과 당신의 팀을 성공의 구덩이로 넣을 것입니다.

Next.js 는 동급 최강 "개발자 경험"과 많은 내장기능을 제공합니다; 몇가지 샘플:

• 직관적인 페이지 기반 라우팅 시스템(동적 라우트 지원)
• 정적 렌더링(SSG), 서버 사이드 렌더링(SSR) 둘 다 페이지별로 사전 렌더링 지원됨
• 더 빠른 페이지 로드를 위한 자동 코드 스플리팅
• 최적화된 프리페칭과 함께 클라이언트 사이드 라우팅
• 내장 CSS, Sass 지원. 그리고 어떤 종류의 CSS-in-JS 라이브러리든 지원.
• 핫 모듈 교체를 지원하는 개발환경
• 서버리스 함수를 사용해 API 엔드 포인트를 구축하기 위한 API 라우트
• 완전히 확장 가능

이 튜토리얼에 대해

이 무료 대화형 과정을 통해 Next.js 를 시작하는 방법에 대해 안내해 줄 것입니다.
이 튜토리얼 안에서, 당신은 매우 간단한 블로그 앱 을 만들며 Next.js의 기초를 배울 것입니다. 여기 최종 결과의 예제가 있습니다.

https://next-learn-starter.now.sh (source)

시작해볼까요?

이 튜토리얼은 자바스크립트와 React에 대한 기본 지식이 있다고 가정합니다. 만약 당신이 리액트 코드를 작성해본 적이 없다면 공식 리액트 튜토리얼 를 먼저 방문해봐야 합니다.

만약 Next.js의 도큐먼테이션을 찾고 있다면 여기를 클릭하세요.

지금 시작하기