npm init -y
npm install react@latest next@latest react-dom@latest
package.json에서 실행 명령어 설정 "dev": "next dev"
app/page.tsx 생성
next.js를 실행시키면 웹사이트를 빌드하려고 하는데 첫번째 페이지를 app 폴더 내부의 page라는 파일에서 찾기 때문에 이름이 중요 ⭐️
page.tsx에 내용을 입력하고 npm run dev를 해주면 터미널에 이런 메세지가 뜬다
layout을 생성하지 않았으니 대신 만들어주겠다 ❓
파일을 보니 layout.tsx라는 것이 생겼다
앱라우터에서 필요한 것이라 삭제해도 next가 자동으로 생성해줌
타입스크립트를 설치하지 않아도 파일 확장자를 보고 자동으로 설치해줌!
새로운 페이지를 만들기 위해 app 내부에 원하는 url의 이름으로 폴더를 만들어주었다
pages 폴더 > 원하는 url명 > index.tsx로 만들어준 페이지 라우터와 다르게
앱라우터에서는 page.tsx를 사용!
page.tsx를 만들어주지 않으면 404 에러 🚫
404 에러일 때 기본 화면을 보여주지 않기 위해 not-found.tsx 파일을 생성한다
따로 설정해주지 않아도 404 에러가 났을 때, 알아서 해당 컴포넌트를 띄워줌 🫢
