안녕하세요 tripexlab(트리플랩)입니다.
오늘은 Nextjs App Router환경에서 사용자 device-check를 체크헤서 useContext로 컴포넌트 전역으로 사용하는 방법에대해서
이야기를 해보겠습니다.
Nextjs App Router
참고:
App Router 는 v13.4 버전부터 안정화가 되었습니다.
// src/context/DeviceType.tsx
'use client';
import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
// DeviceType를 생성합니다.
const DeviceTypeContext = createContext<string | undefined>(undefined);
// DeviceType 컴포넌트를 생성합니다.
interface DeviceTypeProps {
children: ReactNode;
}
// DeviceType 컴포넌트를 생성합니다.
export const DeviceType = ({ children }: DeviceTypeProps) => {
const [deviceType, setDeviceType] = useState<string>("desktop");
useEffect(() => {
const userAgent = navigator.userAgent;
if (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/.test(userAgent)) {
setDeviceType("mobile");
} else {
setDeviceType("desktop");
}
}, []);
return (
<DeviceTypeContext.Provider value={deviceType}>
{children}
</DeviceTypeContext.Provider>
);
};
export function useDeviceTypeContext () {
return useContext(DeviceTypeContext);
};
// src/components/Counter.tsx
'use client';
import { useDeviceTypeContext } from "../context/DeviceType";
export default function Counter() {
const deviceType = useDeviceTypeContext(); // 👈🏻여기서 useContext를 사용해서 deviceType변수를 꺼내올수 있습니다.
return (
<>
<p>{deviceType}</p>
</>
);
}
// src/app/page.tsx
import Counter from '@/components/Counter';
export default function HomePage() {
return (
<div>
<Counter />
</div>
)
}
// src/app/layout.tsx
import { DeviceType } from '@/context/DeviceType'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body className={inter.className}>
<header></header>
<DeviceType> // 👈🏻 context에 정의된 DeviceType를 Provider로 감싸주는것 입니다.
{children}
</DeviceType>
<footer></footer>
</body>
</html>
)
};
정리
여기까지 전체적인 Nextjs App Router 환경에서 사용자 device-check를 체크하는 방법에 대해서 살펴봤습니다.
주석으로 설명글 적어놓은 부분 보시면 이해하는데 도움이 될것 같습니다.😃✅👏
