야나부의 알뜰정보

첫번째는 url이 /user/[name] 과 같을때, name을 받는 방법이다. name을 url query로 받을 수 있고, 이 name에 따라 동적으로 화면 구성이 가능하다. 이것을 하기 위한 예시와 폴더 구조를 적어본다. import { useRouter } from "next/router"; const router = useRouter(); router.push(`/p2p/buy/${name_}`); router 를 통해 param을 전달 가능하다. 일단 폴더 구조를 아래와 같이한다. [ID]의 의미는 router.query를 ID로 받겠다는 의미이다. ID.jsx 코드 상에서는 아래와 같이 데이터를 받아 처리한다. const router = useRouter(); const { ID } = ro..

import { NextResponse } from "next/server"; export async function GET(request, route) { const id = route.params.id; console.log('req',id) return NextResponse.json({ success: true, id:id }); } 쉽게 코드 복사하라고 텍스트도 넣어둔다. 코드 설명을 간단히 하면,http://localhost:3000/api/address/[ID] http://localhost:3000/api/address/12345 뒤에 12345, id에 해당하는 값을 읽어오는 코드이다. 이걸 하기 위해서는 폴더 구조를 아래처럼 하면 된다.

리액트에서 버튼 누를시 다른페이지로 이동하는것을 보여주겠다. next/link 패키지를 사용하여 리디렉션 기능을 생성할 수 있습니다. 다음은 "/home"에서 "/p2p"로 리디렉션하는 예제 코드입니다: 이 예제에서는 Next.js에서 Link와 useRouter 컴포넌트를 가져옵니다. useRouter 훅을 사용하여 라우터 객체에 액세스하여 프로그래밍 방식으로 탐색할 수 있습니다. handleLinkToP2P 함수는 버튼 클릭시 호출되고, 이때 router를 통해 리디랙션을 할 수 있습니다. push로 하면 뒤로가기고 원래있던 home으로 올 수 있습니다. import React from "react"; import Link from "next/link"; import { useRouter } from..