next는 개발자 경험이 매우 좋음
좋다라는건 따로 하나하나 셋팅하지 않아도 지원하는 기능의 규칙만
따른다면 적은 코드로 많은 것을 지원해주기 때문

여기서 리액트가 라이브러리인 이유를 찾을 수 있다.

리액트는 개발자가 원하는 아키텍쳐로 개발자가 주체가되어 사용함

넥스트는 즉, 프레임워크는 개발자가 아닌 프레임워크가 주체가되어 결정함
규칙만 따르면 = 넥스트의 아키텍쳐를 따르면 알아서 코드를 실행시켜줌

next.js 14로 마이그레이션 하려면?

pages 라우터를 사용하거나, 둘다 같이 사용해도 문제는 없음
데이터 패치도 같이 사용해서 점진적으로 마이그레이션 하여 혼합해서 사용해도됨

이제 본론

next.js 프로그램 setup (수동설치 해보기)

단, pnpm 사용해보기

• pnpm이란 여러 프로젝트에서 중복 다운로드를 방지하고 디스크 공간을 절약할 수 있으며
• 이는 패키지가 설치될 때 하드링크를 사용하여 중복파일을 공유하는 방식으로 채택하여
  여러 프로젝트간의 의존성을 효율적으로 공유 가능하다.
• 사용하지 않는 패키지를 자동으로 감지하고 정리하는 기능(자동 GC)이 내장되어있다.
• 패키지 라이프사이클 최적화로 특정 패키지에만 해당 스크립트를 실행하도록되어있다.

1.pnpm 설치

npm i -g pnpm

2.pnpm을 사용하여 관리하려는 프로젝트 이동

mkdir project
cd project

3.패키지 초기화 -pakage.json 파일만 생성

pnpm init

"license": "MIT"
MIT 라이센스는 수정/배포가 자유롭고 실무적,상업적으로 사용할 수 있지만 불이익의 경우 저작궈자에게 아무런 책임을 묻지않는 라이센스이다. (ISC도 MIT라이센스와 같이 오픈소스 소프트웨어 배포를 위한 라이센스이지만 명시적 보증이 없음)

4.의존성 설치 -프레임워크, 라이브러리 설치

pnpm i next@latest react@latest react-dom@latest

5.스크립트 설정 변경 -실행 명령어 변경

 "scripts": {
    "dev": "next dev"
  }

• pnpm run dev 를 실행하면 next, dev를 실행하여 자동으로 app폴더를 참조하고 page.tsx를 찾아 코드를 실행해줌 또 export default인 리액트 컴포넌트여야함 그렇지만 react를 import 한적없고 next에서 알아서 실행시켜주는 것!

• 위 모든건 라이브러리가 아닌 프레임워크이기 때문에 개발자가 따로 참조하거나 설정하지 않고
  그저 프레임워크의 규칙만 따르면 해당 코드를 찾아 실행시켜주는 것임

6.프레임워크 app 라우팅 생성 -export만 했는데 벌어진 일

• 최상위 계층에서 app 폴더 생성 후 안에 page.tsx 생성 후 아래 컴포넌트를 생성후 export를 해준다.

// /page.tsx

const Home = () => {
  return (
    <>
      <h1>helloworld </h1>
    </>
  );
};

export default Home;

• pnpm run dev 를 실행하면 next에서 서버를 생성해준다

• 그런데 typescript를 설치하지 않았지만 page.tsx로 확장가 있기 때문에

• 실행하는 과정에서 자동으로 typescript를 설치해줌
  

• 그리고 root layout layout.tsx를 자동으로 생성해줌
  

root layout 왜 자동 생성되는지의 원리와 중요성에 대해서는 다음 포스팅에서 !!