1. Next.js 프로젝트 설치

• yarn create next-app : next.js 프로젝트 설치
• yarn create next-app --typescript : next.js + typescript 설치
• 시작 명령어 : yarn dev 또는 npm run dev

2. Next.js 폴더 구조

• 초기 폴더구조

• [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/]

  • pages 폴더에 있는 파일이나 폴더는 곧 프로젝트의 라우트가 된다.
  • (정적 라우팅) - pages 폴더 밑에 detail.tsx 파일을 만들면, 경로는 ‘/detail’가 된다.
  • (동적 라우팅) - pages 폴더 밑에 대괄호를 사용하여 pages/[id].tsx 파일을 만들면, 경로는 ‘/1’, ‘/2’가 된다.
  • (아무 경로) - pages/[..all].js 로 파일을 만들면 경로는 /아무경로/계속 이다.

• 라우트

  • pages폴더 밑에 있는 파일은 빌드 시점에 HTML을 만들어 놓는다. 첫 접속 시, 어떤 경로의 페이지라도 요청하면 서버측에서 렌더링한 해당 페이지의 html을 응답한다.
  • 즉, 라우트마다 html이 가득 차 있고, 각각 응답하기 때문에 SEO에 알맞은 것이다. SEO가 필요한 모든 페이지는 pages 폴더 밑에 생성해주면 된다.

• [pages/api/hello.js]

  • 백앤드용 api 라우트이며, "pages/api" 폴더 밑에 파일을 만들면 "/api/파일명"으로 호출할 수 있다.
  • Next.js는 Node.js 기반으로 서버사이드 렌더링이 이루어지기 때문에 서버 부분을 확장하여 api를 구현할 수 있어서 프론트엔드 프로그래머도 간단한 api를 만들 수 있다.

• [next.js]

  • production용 빌드 결과물이다. npm run build 명령어를 실행하면 .next 폴더가 생기고, 웹서버를 띄워서 .next 폴더를 기반으로 사이트가 실행된다.
  • 실제로 .next/server 폴더의 pages 폴더 밑에 html파일들이 있으며, 이는 리액트로 만든 컴포넌트들이 하나의 html파일로 static하게 생성된 결과물이다.
  • 즉, 특정 라우트로 접속하면, CRA 처럼 react-router에 의해 Client Side Rendering이 되는 것이 아니라, static하게 생성된 html 파일이 물리적으로 응답하는 것이다.

• [public]

  • 정적인 파일을 관리한다. 주로 이미지, 검색 엔진 크롤러를 위한 robots.txt, 사이트 소유를 증명하는 html파일들을 넣어둔다.
  • 이미지 가져오기
    • url을 통해서 가져오기
      • <img src="<https://img.google.com/food.png>" alt="food" />
    • 소스코드 내 이미지 파일을 import해서 사용하기
      • <img src={logo} alt="Logo" />
    • public 폴더에 있는 파일을 서버 요청으로 가져오기
      • <img src="/images/mainBg.png" alt="main" />

참고문헌

• next.js 공식 문서 - https://nextjs.org/docs/getting-started
• [toy blog service] Next.js의 API와 json - https://mytutorials.tistory.com/353
• Next.js - 시작 - 1 - https://suk9.tistory.com/83
• 위코드 next.js - https://nextjs.org/docs/getting-started
• [Next.js] Next.js 시작하기- https://garve32.tistory.com/33?category=473361