Next.js

#Next.js는?

• React
• Express..js
• React-router-dom
• Server Side Rendering

→ 이 모두를 내재하고 있다.

#사용법

• 개발환경 실행 : npm run dev
• 배포 파일 생성 : npm run build
• 서비스 시작 : npm run start
  • 개발환경이 아닌 실서버를 실행한다. next.js는 서버까지 내장하고 있다.

#Route

• a 태그를 사용해 href에 파일경로를 적어주면 해당 파일 위치로 이동한다.
• 파일 경로 안에 파라미터를 넣을 수도 있다. ex) /pages/sub/[id].js
  • useRouter라는 훅을 이용해서 파라미터 값을 가져올 수 있다.

  import {useRouter} from 'next/router';
  
  const id=Number(router.query.id);
  

#API Router

• Next.js는 client side기술뿐 아니라 server side 기술도 가지고 있다.
• url에 파일 경로를 넣으면, 해당 파일의 데이터가 출력된다. 즉 간단하게 백엔드를 구축할 수 있다.

+환경 변수

• .env파일을 만들어 환경 변수를 관리한다.
  • process.env.환경변수명 으로 접근한다.

출처 : 생활코딩