hideokamoto/LiffProvider.tsx

## _app.tsx
import type { AppProps } from 'next/app'
import { LiffProvider } from './LiffProvider'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <LiffProvider liffId={process.env.NEXT_PUBLIC_LIFF_ID as string}>
    <Component {...pageProps} />
    </LiffProvider>
  )
}

export default MyApp

## index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { useEffect } from 'react'
import { useLiff } from './LiffProvider'

const Home: NextPage = () => {
  const { liff } = useLiff()
  useEffect(() => {
    if (!liff) return;
    if (!liff.isLoggedIn()) {
      return liff.login()
    }
    liff.getProfile()
      .then(profile => {
        console.log(profile)
      })
  },[liff])
  return (
    <div>
      <Head>
        <title>hello</title>
      </Head>
      <main>
        <h1>Hello liff</h1>
      </main>
    </div>
  )
}

export default Home

## LiffProvider.tsx
import { createContext, FC, PropsWithChildren, useContext, useEffect, useRef, useState } from "react";
import { Liff } from '@line/liff'

const LiffContext = createContext<{
    liff?: Liff
}>({})

export const useLiff = () => useContext(LiffContext)

export const LiffProvider: FC<PropsWithChildren<{
    liffId: string;
}>> = ({children, liffId}) => {
    const didLoadRef = useRef(false)
    const [liff, setLiff] = useState<Liff | undefined>()
    useEffect(() => {
        if (typeof window === 'undefined') return;
        if (didLoadRef.current === true) return;
        didLoadRef.current = true
        import('@line/liff')
        .then(async (data: any) => {
            await data.init({
                liffId
            })
            setLiff(data)
        })
    }, [liffId])
    return (
        <LiffContext.Provider
            value={{
                liff,
            }}
        >
            {children}
        </LiffContext.Provider>
    )
}
	import type { AppProps } from 'next/app'
	import { LiffProvider } from './LiffProvider'

	function MyApp({ Component, pageProps }: AppProps) {
	return (
	<LiffProvider liffId={process.env.NEXT_PUBLIC_LIFF_ID as string}>
	<Component {...pageProps} />
	</LiffProvider>
	)
	}

	export default MyApp
	import type { NextPage } from 'next'
	import Head from 'next/head'
	import { useEffect } from 'react'
	import { useLiff } from './LiffProvider'

	const Home: NextPage = () => {
	const { liff } = useLiff()
	useEffect(() => {
	if (!liff) return;
	if (!liff.isLoggedIn()) {
	return liff.login()
	}
	liff.getProfile()
	.then(profile => {
	console.log(profile)
	})
	},[liff])
	return (
	<div>
	<Head>
	<title>hello</title>
	</Head>
	<main>
	<h1>Hello liff</h1>
	</main>
	</div>
	)
	}

	export default Home
	import { createContext, FC, PropsWithChildren, useContext, useEffect, useRef, useState } from "react";
	import { Liff } from '@line/liff'

	const LiffContext = createContext<{
	liff?: Liff
	}>({})

	export const useLiff = () => useContext(LiffContext)

	export const LiffProvider: FC<PropsWithChildren<{
	liffId: string;
	}>> = ({children, liffId}) => {
	const didLoadRef = useRef(false)
	const [liff, setLiff] = useState<Liff \| undefined>()
	useEffect(() => {
	if (typeof window === 'undefined') return;
	if (didLoadRef.current === true) return;
	didLoadRef.current = true
	import('@line/liff')
	.then(async (data: any) => {
	await data.init({
	liffId
	})
	setLiff(data)
	})
	}, [liffId])
	return (
	<LiffContext.Provider
	value={{
	liff,
	}}
	>
	{children}
	</LiffContext.Provider>
	)
	}