야나부의 알뜰정보

첫번째는 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에 해당하는 값을 읽어오는 코드이다. 이걸 하기 위해서는 폴더 구조를 아래처럼 하면 된다.

https://www.telerik.com/blogs/how-to-implement-google-authentication-nextjs-app-using-nextauth How to Implement Google Authentication in Next with NextAuth This article demonstrates how to incorporate single sign-on using OAuth protocol in a Next.js application via the NextAuth module with Google authentication. www.telerik.com 이 글을 따라하면 잘 됩니다. firebase login을 연동하는 방법이 server기반 (firebase-admin)을..

import { useTable, useRowSelect, useSortBy, useGlobalFilter, usePagination, } from "react-table"; 예제 가져와서 구현해보고 있는데, 너비 조정할 필요가 있었다. 너비 조정하는 과정은 다음과 같은데, 1. 먼저 columns 배열에 minWidth정보를 채운다. 2. columns는 useTable에 사용된다. 3. 에서 각 column마다 설정된 minWidth정보가 사용된다. 각 순서에 대해 코드를 보면서 설명하면 컬럼 변수에 텍스트로 들어갈 부분, key값(accessor), minWidth를 넣어둔다. Cell을 보면 Cell엔 어떻게 표시될지가 표현된다. const COLUMNS = [ { Header: "customer..

nextauth error가 발생할 수 있는데, 나 같은 경우엔 next.js version과 next-auth version이 안맞아서 난 에러였다. next version을 v12를 쓰고 있었는데 이 v12와 맞는 버젼에 next-auth를 써야 빌드된다. "next": "12.1.6", 아래 글처럼 "next-auth": "4.15.1" 로 고정한후 node_modules를 지우고 다시 빌드하니 문제없이 동작했다! https://stackoverflow.com/questions/74339649/next-js-error-cannot-find-module-next-headers Next.js error cannot find module 'next/headers' Faced this issue when ..

리액트에서 버튼 누를시 다른페이지로 이동하는것을 보여주겠다. 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..