NextJS) 모바일웹(mobile) 접속시 리다이렉트(redirect) 2가지 방법

1. user-agent를 확인하고, useEffect로 모바일페이지 리다이렉트

import "../styles/globals.css";
import React, { useEffect } from "react";
import App, { AppContext, AppInitialProps } from 'next/app'


// 밑에서 mobile props 받기
function MyApp({ Component, pageProps, mobile }) {

// 현재 접속을 mobile 인지 확인하고 mobile이면 리다이렉트
// 뒤에 path와 쿼리는 javascript 문법으로 가져와서, 조건문 사용해서 뒤에 추가하기
  useEffect(()=>{
    if(mobile == -1){
      console.log('asdad')
      window.location.replace('https://m.pandaparts.co.kr');
      // document.domain = 'm.pandaparts.co.kr'
    }
  },[])


  const router = useRouter();
  return (
    <>
    
      <Component {...pageProps} />
    </>
  );
}

MyApp.getInitialProps = async (context) => {
  const { ctx, Component } = context; // next에서 넣어주는 context
  let pageProps = {};
  
  // calls page's `getInitialProps` and fills `appProps.pageProps`
	const appProps = await App.getInitialProps(context);
  
	//userAgent 확인
	const userAgent = await context.ctx.req ? context.ctx.req?.headers['user-agent'] : navigator.userAgent
  console.log('userAgent',userAgent)

	//Mobile이 아니면 -1, mobile이면 정수
	const mobile = await userAgent?.indexOf('Mobi')
  console.log('mobile !== -1',mobile !== -1)

 	// mobile props 넘겨주기
  return { pageProps, mobile };
};

export default MyApp;

참고 자료

https://typo.tistory.com/entry/Nextjs-%EA%B8%B0%EB%B3%B8%EA%B8%B0%EB%8A%A5-userAgent-%EC%A0%95%EB%B3%B4-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0

https://www.howdy-mj.me/next/how-to-detect-device/

2. next.config.js에 subdomain을 추가하여  리다이렉트 시키기

module.exports = {
 return [
      {
        source: "/:path*",
        has: [
          {
            type: "header",
            key:'User-Agent',
            value:"(.*Mobil.*)",
          },
        ],
        destination: "https://m.pandaparts.co.kr/:path*",
        permanent: false,
      },
    ]
  }
  }

모바일인 경우는 정규표현식으로 인해 /mobi/g 로 user-agent를 인식한다.

조건문이 되면 데스티네이션으로 리다리엑팅시킨다.

 

 

 

 

참고 자료

https://nextjs.org/docs/api-reference/next.config.js/redirects