#02 Next.js (Pages Router) : 설치, 라우터, api폴더

 

* 중첩 라우터

* 다이나믹 라우터

* 페이지 이동 ( Link & router )

* api 폴더 (외부API 주소 은닉)

---

 

1. Node 설치 (설치 확인)

node -v

 

2. create-next-app 설치

npx create-next-app pages-route .

>  npx (node로 만들어진 프로그램을 설치없이 실행 하는 프로그램)

> . : 현재폴더

 

3. package.json

> 개발 : yarn dev

> 배포 : yarn build + yarn start

 

4. index.tsx파일

 

 

5. pages폴더 > 안에 폴더 만들면 라우터 안에 폴더 = 중첩 라우터

 

6. pages폴더 > posts 폴더 > 안에  [postId].tsx 파일 생성 = 다이나믹 라우터

* useRouter 사용하기 

* 어떤 값이 들어가도 동적으로 변경 가능

 

7. 페이지 이동 : Link & router (필요에 따라 사용하기)

* Router: router.push('/')

* Link: href = '/'

 

8. api 폴더 > hello.ts 

* 서버리스 기능 : 복잡한 서버설정 안해도 함수를 만들 수 있는 좋은 기능

* 백엔드 서버를 경유하지 않아도 됨 (db에 쉽게 접근 가능)

* api폴더를 사용하면, 네트워크에서 request url 볼 때, 주소를 은닉할 수 있음!

(적용 전 : https://외부api 주소 /todos /1 )

(적용 후 : https://localhost:3000/api(내가 설정한 값)/todos /1) => 이런식으로 외부api 주소 은닉 가능!