NEXT.JS : The Basic of NEXT.JS

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

install(수동)

npm init -y //package.json을 만들어주는 명령어
npm install react@latest next@latest react-dom@latest //가장 최신 버전 인스톨

react@latest : UI를 구성하는 부분
next@latest : 리액트 기반의 Framework
react-dom@latest : 리액트에서 구성한 것들을 브라우저의 DOM에 렌더

실행

package.json에 script를 추가한다.

"dev": "next dev"

해당 명령어를 터미널에 입력하면 Next JS가 실행된다.

page

"dev": "next dev"를 실행하면 Next JS는 app폴더 안의 page.tsx(jsx)를 찾는다.
수동설치이므로 현재의 파일구조에는 app폴더가 존재하지 않으니 새로 만들어준다.
VSC에서 에러를 표기했지만 프로젝트를 실행하면 TypeScript설정을 자동으로 설치해주기 때문에 무시해도 된다. (해당 에러는 확장자가 tsx일 때만 생기는 에러이다.)
그리고 컴파일링이 되기 전에 이런 메세지가 출력되는 것을 확인 할 수 있다.
⚠ Your page app/page.tsx did not have a root layout. We created app\layout.tsx for you.
root layout이 없어서 자동으로 만들어줬다는 메세지이다.

layout.tsx(jsx)구조

layout.tsx를 살펴보면 RootLayout가 export default 되고 있고, metadata는 export만 되고 있는데 이는 export default객체는 하나만 지정할 수 있기 때문이다.

layout.tsx(jsx)파일을 삭제하게 될 경우 터미널에서 해당 파일이 삭제돼었다는 문구가 출력되고 삭제된 layout.tsx(jsx)파일을 다시 만들어준다.