Next.js

1. 라우팅

import Link from "next/link"; 

function a() {
  return (
      <div>
     	<Link href="/">home</Link>
      </div>
    )

혹은

useRouter를 사용하여 페이지 이동

'use client'

import {useRouter} from 'next/navigation'

function a() {
  const router = useRouter();
  return (
    <button onClick={() => {router.push('/')}}>home</button>
	)
}

useRouter에는 라우팅과 관련된 몇가지 기능이 있다

router.back() // 뒤로가기
router.forward() // 앞으로가기
router.refresh() // 이전과 비교하여 다른점만 새로고침 soft refresh 기능
router.prefetch() // 해당 url 경로를 미리 로드하는 기능.

usePathname()은 현재 url를 출력
useSearchParams()는 쿼리 정보를 출력
useParams() dynamic route에 입력된 파라미터 출력

4. 이미지 삽입

최적화된 이미지 넣기 위해

<.Image/> 태그를 사용하자
자동 이미지 lazy loading + 사이즈 최적화 + layout shift 방지 기능이 있다.

5. server component / client component

server component
장점

• 페이지 로드 빠르다.
• SEO(검색결과) 유리하다.
  단점
• HTML 안에 JS 못넣고 useState, useEffect등 사용 불가능

client component
장점

• HTML 안에 JS 사용가능
  단점
• 페이지 용량이 커지고, 로딩 속도도 느려진다.

7. useState, useEffect, onClick

사용할때 client component를 써야함

'use client';

붙이면 끝.

9. Dynamic Route

/index/[indexId] 와 같이 유동적인 라우팅을 위한 폴더구성

app
-> index
	-> [indexId]
 		-> page.js

10. API 만들기 / API 호출

Next.js에선 백엔드까지 모두 구현을 가능 하기에
API를 만들려면 폴더명을 아래와 같이 구성해야한다.
/api/파일명

app
-> ...

pages
-> api
	index.js

API에서도 URL parameter를 활용 가능하다.

app
-> ...

pages
-> api
	index.js
    	[id].js

req.query로 parameter 활용 가능하다.

export default function handler(req, res) {
	console.log(req.query);
}

11. Ajax로 API 호출

API를 호출하게 된다면 페이지가 새로고침이 되게 되는데.
그것을 원하지 않는다면 Ajax를 사용해야 한다.