차이점들
1. React는 JS의 라이브러리고 Next는 프레임워크이다.
2. React는 CSR만 지원하지만 Next는 SSR, static render또한 지원한다.
3. React는 vanilla.js를 사용해도 되지만, Type Script를 사용이 권장된다.
3-1. 타입스크립트를 사용하는 컴포넌트는 확장자 명을 .tsx로 사용한다.
4. 구조의 차이
App.tsx
4-1. 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트를 의미합니다.
- pages/_app.tsx 경로에 생성
- 모든 페이지는 이곳을 통하게 되고 공통 레이아웃을 만들때 사용
- 글로벌 CSS 적용
레이아웃 설정을 통해 페이지 전환시 특정 레이아웃을 유지할 수 있습니다.
페이지 전환시 특정 레이아웃의 상태값도 유지
document.tsx
|-- .next
|-- node_modules
|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- .gitignore
|-- next-env.d.ts <-- 추가 됨
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- tsconfig.json <-- 추가 됨.next
-- npm run dev 실행시 생성되는 폴더와 파일
node_modules
-- 설치된 npm modules 관련 폴더와 파일
pages
-- 프로젝트에서 화면에 표시될 페이지 관련 폴더
-- 페이지를 담당하는 컴포넌트
( Nextjs에서는 Routing 시스템이 파일구조로 되어있다. 그래서 pages 폴더에는 파일 이름과 구조에 나름대로 컨벤션이 존재한다. 예:_app.js 등, Routing 설명은 다음에~ )
public
-- 프로젝트에 사용될 Static 한 파일들(이미지 파일 등)이 저장된 폴더
styles
-- CSS 관련 폴더
.eslintrc.json
-- ESLint 설정 파일
next-env.d.ts
-- npm run dev 실행시 자동으로 생성됩니다.
이 파일은 Next.js 유형이 TypeScript 컴파일러에서 선택되도록 합니다.
제거할 수는 없지만 편집할 수는 있습니다(하지만 필요하지 않음).
-- Next.js서 추천 설정한 TS로 만들고 싶으면 next-env.d.ts 편집
next.config.js
-- Next.js 프로젝트 설정 파일
.gitignore
-- git 버전 관리에서 무시하고 싶은 파일 이름을 기록하는 파일
package-lock.json
-- 생성된 node_modules 폴더의 정보
package.json
-- 사용하는 node_modules 정보
-- 기본적인 프로젝트에 대한 명세
README.md
-- 프로젝트 파일에 대한 정보
tsconfig.json
-- npm run dev 실행시 자동으로 생성됩니다.
-- Next.js에서 추천 설정 아닌 TS세팅을 커스텀하고 싶으면 tsconfig.json 편집
