Next Middleware를 사용하여 비동적 경로에서 지리적 위치 액세스 및 사용

Next 미들웨어를 사용하여 지리적 위치에 액세스

나는 Next.js의 미들웨어를 자주 사용하지 않지만 몇 번 시도했습니다. 최근에 다른 개발자의 Discord에 있는 누군가가 Jamstack과 채팅하고 싶은 경우 Discord에서 비동적 페이지에 위치 정보를 추가하는 방법에 대해 질문했습니다.

_middleware 란 무엇입니까?

미들웨어를 사용하면 구성보다 코드를 사용할 수 있습니다. 이렇게 하면 사용자가 방문할 때 애플리케이션이 작동하는 방식에 훨씬 더 많은 유연성이 제공됩니다. 미들웨어는 들어오는 요청이 완료되기 전에 실행되므로 재작성, 리디렉션, 헤더 추가 또는 HTML 스트리밍을 통해 응답을 수정할 수 있습니다.

지리적 위치 추가

상황에 따라 이 예제의 경우 _middleware.(js.tsx)가 필요한 위치에 따라 모든 페이지에서 실행됩니다. 그러나 특정 페이지 또는 동적 경로에 대해 실행하기 위해 중첩된 경로에서 사용할 수 있습니다.

필요한 파일 내에서 필요한 곳에 파일을 생성합니다import {NextResponse} from “next/server”.

그런 다음 생성export async function middleware(req){} 여기에서 사용자 위치를 추가하는 작업을 수행할 것입니다.

Next.js의 미들웨어는 요청에서 cookies , nextUrl , i18n , ua , geo , ip 에 액세스할 수 있습니다. 즉, 이를 사용하여 애플리케이션에 지리 위치를 추가할 수 있습니다.

요청을 다시 작성하려면 요청에서 nextUrl 및 geo에 액세스해야 합니다.

예를 들어 const { nextUrl: url, geo } = req 이제 nextUrl를 수정하여 searchParams(쿼리 매개변수)를 요청에 추가할 수 있습니다.

그런 다음 마지막으로 아래의 NextResponse를 사용하여 새 URL을 반환하면 전체 요청입니다.

import { NextResponse } from 'next/server'

export async function middleware(req) {
  const { nextUrl: url, geo } = req
  const country = geo.country || 'US'

  url.searchParams.set('country', country)

  return NextResponse.rewrite(url)
}

페이지 업데이트 중

이제 우리는 지리 위치를 페이지에 추가하고 사용해야 합니다. 그렇게 하려면 먼저 middleware에서 getServerSideProps까지 전달하여 페이지에 전달해야 합니다. 현재 _middleware에는 서버에 대한 모든 정보가 있습니다.

// pass the _middleware to the index.js 

export const getServerSideProps = ({ query }) => ({
  props: query,
})

마지막으로 페이지에서 사용할 수 있지만 props를 페이지에 전달하여 원합니다.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router'

// pass the _middleware to the index.js 

export const getServerSideProps = ({ query }) => ({
  props: query,
})

export default function Home(props) {
    // use it right from the props
  console.log(props.country)
// or you can grab it from the router.
  const router = useRouter();

  console.log(router.query);
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to {props.country}
        </h1>
      </main>
    </div>
  )
}

이제 지리적 위치를 알고 필요한 모든 것을 처리할 수 있습니다.

One thing to note, geolocation made not be available so just be cautious, that is why we have a back up plan of US

Reference

이 문제에 관하여(Next Middleware를 사용하여 비동적 경로에서 지리적 위치 액세스 및 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/perkinsjr/using-next-middleware-to-access-and-use-geolocation-in-a-non-dynamic-route-25n

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다