npx create-react-app 소멸

SPA( Single Page Application )의 혁신적인 REACT의 설치 명령인 npx create-react-app 은 현재 react 공식 홈페이지에서도 사용치 않고, 프레임웍 이용을 권장합니다.  REACT팀과 협업 중이라는 Vercel의 Next.js가 대표적인 추천 프레임웍 입니다. Next.js의 설치는 npx create-next-app 으로 "next" 라는 단어의 변화가 새로운 웹 프로그래밍의 질서를 세웁니다.

 

Next.js 13.4 버전 설치

 

1. 시스템은 Node.js 16.8 이후 버젼, React 18.2+ 이상을 추천합니다.

 

2. 자동 설치 

create-next-app은 입력하는 프로젝트 이름으로 폴더를 생성하고, 필요한 종속 항목을 설치합니다. 

 

> npx create-next-app@latest

특정 프로젝트 안에 설치하고자 하면,

특정프로젝트명> npx create-next-app@latest .

npx create-next-app 한 칸 띄고 " . "  또는 " ./ " 을 사용합니다. Next.js는 기본적으로 TypeScript, ESLint 및 Tailwind CSS 구성하며, 애플리케이션 코드에 src 디렉토리도 선택 설치 할 수 있습니다. 

 

3. 수동설치( Manual Installation )

> npm install next@latest react@latest react-dom@latest

package.json, app 폴더, public 폴 등 일부 추가 할 내용을 목적에 맞게 설치 합니다. 관련 사항은 아래 링크를 꼭 참조하세요.

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

4. 실행

관련 디랙토리의 package.json 파일의 "scripts"에 표기 된대로, 개발모드이면 "dev"로 실행합니다.

> npm run dev

이제 브라우저에서 http://localhost:3000 로 접속하면 Next.js 홈페이로 설정된 초기화면을 확인 할 수 있습니다.

 

5. Next.js 란

-  웹 개발과정을 React보다 속도 및 편리함 개선 ( Rendering Process, SEO, file-based Routing, Code Splitting, Full Stack Application(Ver.9+) )

- 완전히 새로운 기술이라기 보다는 React 기본 문법을 바탕으로한 확장판이라고 생각해도 됩니다.

- 결국은 React.JS의 핵심기능은 숙지하고 있어야, Next.JS를 입문 할 수 있습니다.

 

 

 

 

 

( 대문이미지는 TypeScript, `src/` directory 를 No로 설정한 디렉토리입니다 )