[react] next.js 세팅하기

next.js 이란?

 

Next.js는 React 라이브러리의 프레임워크이다.

 Next.js를 사용하는 가장 큰 이유로 SSR(Server-Side Rendering)이 가능하기때문에 사용

 CSR 방식은 검색엔진에 부적합.

 

자세한 건 링크 참고

 

https://changrea.io/react/next.js%EC%97%90-%EB%8C%80%ED%95%B4/

Next.js에 대해

 

Node.js 설치

 

해당 링크 참고 2번에 나와있음!!

https://daeseok94.tistory.com/37?category=984039 

vscode 로 React 환경구성하기

 

 

next.js 세팅

 

 -- typescript : typescript 구성하기

npx create-next-app work --typescript
혹은
yarn create next-app work --typescript

 

 해당 명령어 입력 후 해당 폴더에 next.js 설치~

 

 

프로젝트 구성

 

 

 

pages : 페이지를 담당하는 컴포넌트를 저장하는 디렉토리. 폴더 구조로 라우팅 기능(url)을 제공함.
public : 정적 리소스를 저장하는 디렉토리. 웹에 사용되는 이미지 파일 등이 저장됨
package.json : 프로젝트에서 사용할 모듈 및 서버 실행을 위한 명령어를 설정할 수 있는 파일

 

Package.json 파일을 보면 개발환경에서 서버를 실행시키는 dev 명령어를 확인할 수 있습니다.
터미널에 npm run dev 를 입력하면 서버가 실행됩니다.

 

http://localhost:3000/  URL로 들어가면 밑에 화면이 뜨면 성공!!!