next.13 몽고db 글목록 조회기능/ 다이나믹 라우터 사용법 / 캐치 url

list.tsx 코드

import { connectDB } from '@/util/database';
import Link from 'next/link'
const page = async() => {
    let result = await (await connectDB).db("forum").collection('post').find().toArray();
    console.log(result);

    return (
    <div className="list-bg">
      {result.map((item:{_id:string,title:string,content:string})=>(
        <Link href={`/detail/${item._id}`} key={item._id}>
        <div className="list-item" >
          <h4>{item.title}</h4>
          <p>{item.content}</p>
        </div>
        </Link>
        
      ))}
    </div>
    );
};

export default page;

#위에서는 item._id 이나 문자로 안나올경우 item._id.toString() 이렇게 써주면된다

 

다이나믹 라우터

경로 폴더를 하나 만들고 (현재는 itemPage 폴더)

그안에 [아무제목] 이렇게 폴더를 만들고 그안에 page.tsx 를 만들면 [] 이게 다이나믹 라우터가 되는것이다.

위쪽 코드 리스트에서 Link 태그에 게시글의 아이디를 보내주어서. 받는 방법이있다.

props 를 받아서 params 파람스를 보여준다.

import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';
const page = async(props:any) => {
    let result = await (await connectDB).db("forum").collection('post').findOne({_id:new ObjectId(props.params.itemPage)})
    console.log(props.params.itemPage)
    return (
        <div>
            <h4>상세페이지</h4>
            <h4>{result.title}</h4>
            <p>{result.content}</p>
        </div>
    );
};

export default page;

 

useRouter 사용법  // 클라이언트 컴포넌트 에서만 사용가능     'use client'

import { useRouter } from "next/navigation";

추가후에

const DetaiLink = () => {
        let router = useRouter()
    return (
        <button onClick={()=>{router.push('/list')}}>
            버튼
        </button>
    );
};

이런식으로 사용한다.

router.back()    =    뒤로가기

router.forward()    =  앞으로가기

router.refresh()   =   새로고침 (전체 새로고침이 아니라 변동이 있는 일부분만 새로고침 해줌.)

router.prefetch('/detail/dsds')   =   페이지에 필요한 파일들을 미리 로드 시켜둠(페이지 이동은아님) (Link 태그는 기능자체로 있다 Link 태그 보이는곳에서 프리패치함.)

 

링크태그 프리패치 기능끄기

<Link prefetch={false}></Link>

 

현재 url 출력

let a = usePathname()

 

현재 서치파람스트리 전부출력 = url 다이나믹 라우터 입력한거 출력은 useParams()

let b = useSearchParams()

 

#정리

1.  여러페이지 만들려면 [ 다이나믹 라우터 ]

2. 현재 url 이 뭔지 궁금하면 props/useRouter

3. 페이지이동, prefetch 등은 useRouter