[공식문서] Next.js 앱 만들기 #1

React를 사용하여 처음부터 완전한 웹 애플리케이션을 구축하려면 고려해야 할 중요한 세부 사항이 많이 있습니다.

 

• 웹팩과 같은 번들러를 사용하여 코드를 번들링하고 Babel과 같은 컴파일러를 사용하여 변환해야 합니다.
• 코드 분할과 같은 제품 최적화를 수행해야 합니다.
• 성능과 SEO를 위해 일부 페이지를 정적으로 사전 렌더링하거나 서버 사이드 렌더링 또는 클라이언트 사이드 렌더링을 사용할 수 있습니다.
• 리액트 앱을 데이터 저장소에 연결하려면 일부 서버 측 코드를 작성해야 할 수도 있습니다.

이러한 문제들을 해결해 주는 프레임워크가 필요합니다. 그러나 이러한 프레임워크는 적절한 추상화 수준을 가져야 합니다. 그렇지 않으면 유용하지 않을 것입니다. 또한 코드를 작성하는 동안 훌륭한 "개발자 경험"을 제공해야 합니다.

 

Next.js : 리액트 프레임워크

여기 Next.js, 리액트 프레임워크가 등장합니다. Next.js는 위에서 언급한 모든 문제에 대한 해결책을 제공합니다. 하지만 더 중요한 점은 리액트 애플리케이션을 구축할 때 성공의 길로 안내해줍니다.

 

Next.js는 최고 수준의 개발자 경험과 다음과 같은 내장 기능을 제공합니다.

 

• 직관적인 페이지 기반 라우팅 시스템 (동적 경로 지원 포함)
• 사전 렌더링, 정적 생성(SSG) 및 서버 사이드 렌더링(SSR) 모두 페이지 별로 지원됨
• 빠른 페이지 로드를 위한 자동 코드 분할
• 최적화된 프리페칭을 갖춘 클라이언트 사이드 라우팅
• 내장 CSS 및 Sass 지원, CSS-in-JS 라이브러리 지원
• Fast Refresh 지원을 포함한 개발 환경
• 서버리스 함수로 API 엔드포인트를 구축하기 위한 API 라우트
• 완전히 확장 가능함

Next.js는 수만 개의 프로덕션 웹 사이트와 웹 애플리케이션에서 사용되며, 세계 최대 브랜드 중 많은 곳에서 사용됩니다.

 

이 강좌에 대해

이 무료 대화식 강좌는 Next.js 시작 방법을 안내합니다.

 

이 강좌에서는 매우 간단한 블로그 앱을 만들면서 Next.js 기본을 배우게 됩니다. 아래는 최종 결과의 예시입니다.

 

https://next-learn-starter.vercel.app (소스)

 

이 강좌는 JavaScript와 React의 기본 지식을 전제로 합니다. 리액트 코드를 처음 작성하는 경우 공식 리액트 튜토리얼을 먼저 진행하시는 것이 좋습니다.

대신할 문서를 찾으시는 경우 Next.js 문서를 방문하시기 바랍니다.