yarn create next-app : next.js 프로젝트 설치yarn create next-app --typescript : next.js + typescript 설치yarn dev 또는 npm run dev.png)
[package.json]
package.json 파일의 scripts 명령어 목록이다. 개발할 때는 yarn dev 혹은 npm run dev 로 시작한다.
npm run build : .next 폴더가 생성된다.npm run start : server가 시작된다."scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
[pages/]
detail.tsx 파일을 만들면, 경로는 ‘/detail’가 된다.pages/[id].tsx 파일을 만들면, 경로는 ‘/1’, ‘/2’가 된다.pages/[..all].js 로 파일을 만들면 경로는 /아무경로/계속 이다.라우트
[pages/api/hello.js]
pages/api" 폴더 밑에 파일을 만들면 "/api/파일명"으로 호출할 수 있다.Next.js는 Node.js 기반으로 서버사이드 렌더링이 이루어지기 때문에 서버 부분을 확장하여 api를 구현할 수 있어서 프론트엔드 프로그래머도 간단한 api를 만들 수 있다.[next.js]
npm run build 명령어를 실행하면 .next 폴더가 생기고, 웹서버를 띄워서 .next 폴더를 기반으로 사이트가 실행된다..next/server 폴더의 pages 폴더 밑에 html파일들이 있으며, 이는 리액트로 만든 컴포넌트들이 하나의 html파일로 static하게 생성된 결과물이다.[public]
robots.txt, 사이트 소유를 증명하는 html파일들을 넣어둔다.<img src="<https://img.google.com/food.png>" alt="food" /><img src={logo} alt="Logo" /><img src="/images/mainBg.png" alt="main" />