Next.js (Dynamic route, useRouter, 서버 기능)

🫠 Dynamic route

• 폴더 하나로 수많은 URL을 만들어낼 수 있습니다.

dynamic route 만드는 법

• 폴더이름을 [폴더이름] 이렇게 만들면 '이 부분에 아무거나 입력했을 때' 라는 뜻이 됩니다.

MongoDB에서 게시물 하나만 찾아서 가져오고 싶다면?

  const result = await db
    .collection("post")
    .findOne({ _id: new ObjectId("64880201097b4e89b21843f3") });

• findOne()안에 object 자료를 넣으면 그 내용이 포함된 document 하나를 가져다줍니다.

• ObjectID import 해와야합니다.

유저가 URL에 입력한 내용 가져오는 법

• page.js 컴포넌트에 파라미터를 아무거나 등록해두면 [폴더이름] 자리에 유저가 입력한 내용을 props 변수에 자동으로 담아줍니다.

console.log(props) 하면

{ params: { id: '1' }, searchParams: {} } 출력됩니다.

🫠 useRouter

• client component 안에서만 사용가능

"use client";

import { useRouter } from "next/navigation";

export default function DetailLink() {
  const router = useRouter();
  return (
    <button
      onClick={() => {
        router.push("/");
      }}
    >
      버튼
    </button>
  );
}

• push : 페이지 이동
• back : 뒤로가기
• forward : 앞으로가기
• refresh : 바뀐내용만 새로고침(soft refresh)
• prefetch : 페이지 미리로드 (url의 내용을 미리 로드해줍니다.)

Link 태그에도 prefetch 기능 내장되어 있습니다.
prefetch 기능 끄고 싶으면 prefetch 속성을 false로 하면 됩니다.

<Link prefetch={false} href={`/detail/${data._id}`}>

• usePathname() : 현재 URL 출력
• useSearchParams() : Search parameter(query string) 출력
• useParams() : dynamic route에 입력한 내용

🫠 Next.js에서 서버기능 만들기

ex) /pages/api/test.js

• pages 폴더 안에 만든 파일과 폴더는 자동으로 서버기능의 URL이 됩니다. (/api/test)
• 유저가 /api/test 라는 URL로 GET/POST/PUT/DELETE 요청하면 test.js 안에 있는 코드가 실행됩니다.

import { connectDB } from "@/util/database";

export default async function handler(req, res) {
  const db = (await connectDB).db("forum");
  const result = await db.collection("post").find().toArray();
  if (req.method === "GET") {
    return res.status(200).json(result);
  }
}

서버로 POST method 요청하려면

      <form action="/api/post/new" method="POST">
        <input name="title" placeholder="글제목" />
        <input name="content" placeholder="글내용" />
        <button>버튼</button>
      </form>

• action에는 URL 기입, method는 GET, POST 중에 하나 기입

• 그 URL과 method로 만들어놓은 서버기능에 input에 적힌 내용들을 전달해줍니다.

• req.body : 폼으로 전송한 데이터
  { title : "안녕", content : "반가워" }

MongoDB에 데이터 저장하는 법

import { connectDB } from "@/util/database";

export default async function handler(req, res) {
  if (req.method === "POST") {
    if (req.body.title === "" || req.body.content === "")
      return res.status(500).json("내용을 모두 적어주세요.");
    try {
      const db = (await connectDB).db("forum");
      const result = await db.collection("post").insertOne(req.body);
      return res.redirect(302, "/list");
    } catch (error) {
      return res.status(400).json("Error");
    }
  }
}

• inserOne()을 사용하여 document를 새로 생성합니다.
• 유저에게 메시지나 데이터 보낼 때는 json() 사용
• redirect를 사용하면 성공시 해당 URL로 이동할 수 있습니다.