Next.js 시작 세팅

React로 완전한 웹 애플리케이션을 구축하려면 고려해야할 중요한 세부사항이 많이 있음

• 코드는 Webpack과 같은 번들러를 사용하여 번들링 되고 Babel 같은 컴파일러를 사용하여 변환 되어야함
• 코드 분할과 같은 생산 최적화를 수행해야함
• 성능 및 SEO (search engine optimization, 검색엔진 최적화)를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있음 서버측이나 클라이언트 측 렌더링을 사용할 수도 있음
• React 앱을 데이터 저장소에 연결하기 위해 일부 서버측 코드를 작성해야할 수도 있음

하지만, 프레임워크는 이러한 문제를 해결할 수 있지만
그러한 프레임 워크는 올바른 수준의 추상화를 가져야함

Next.js : 반응 프레임워크

React Framework인 Next.js를 입력함

Next는 동급 최고의 개발자 경험과 다음과 같은 기본 제공 기능을 제공하는 것을 목표로 함

• 직관적인 페이지 기반 라우팅 시스템 (동적 경로 지원)
• Pre-Rendering 즉, SSG, SSR은 페이지 별로 지원함
• 더 빠른 페이지 로드를 위한 자동 코드 분할
• 최적화된 프리패치를 사용한 클라이언트 측 라우팅
• 내장 CSS 및 SASS (Syntactically Awesome Style Sheets) 지원 및 모든 CSS-in-JS fkdlqmfjfl wldnjs
• Fast Refresh를 지원하는 개발 환경
• Serverless Functions로 API 끝점을 구축하기 위한 API 경로
• 완전히 확장 가능

세팅

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

새로운 디렉토리가 생겼으니 디렉토리로 옮겨 실행

실습은 다음 글에서!