프론트엔드

Next.js

asaei623 2022. 9. 14. 00:11

#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.환경변수명 으로 접근한다.

출처 : 생활코딩