🟦 [React] Next.js

next.js 셋팅 방법

npx create-next-app@14 프로젝트명

 

파일 구조

src/pages/index.js => index.html

 

_서버사이드렌더링

src/pages/test.jsx 를 만들시 http://localhost:3000/test 로 바로 나오게됨

 

- test.jsx 파일

export default function Page(){
  return(
    <h1>test</h1>
  )
}

 

폴더로도 가능

=> src/pages/폴더명

=> localhost:3000/폴더명

 

app.js

=> 공통적인 내용 

 

 

검색 기능 활용하기 위한 useRouter()

 

 

[id].jsx => 동적 파라미터 사용 파일명

=> http://localhost:3000/book 이라고 동적 파라미터를 사용하지 않으면 404 에러가 남

=>http://localhost:3000/book/1 이렇게 줘야 됨

 

[[...id]].jsx => 동적 파라미터를 주지 않아도 에러가 나지 않음

=> http://localhost:3000/book 가능

 

404페이지 -> 404.jsx로 만들면 됨

 

링크 만들기 Link, useRouter 사용

 

 

공통적인 부분 관리하기(header, footer, 메인)

=> _app.js 에 공통 부분 모아둔 .jsx import하기 (*관리 용이)

=> children 사용