line · Nicr0n · Oct 31, 2025
@@ -0,0 +1,28 @@
+import type { Metadata, Viewport } from "next";
+import { LIFFProvider } from "../providers/liff-providers";
+
+export const metadata: Metadata = {
+  title: "LIFF App",
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1.0,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="jp">
+      <body>
+        <LIFFProvider>{children}</LIFFProvider>
+      </body>
+    </html>
+  );
+}
@@ -1,15 +1,12 @@
-import Head from "next/head";
-import styles from "../styles/Home.module.css";
+"use client";
+import { useLIFF } from "../providers/liff-providers";
+import styles from "../styles/App.module.css";
+
+export default function Home() {
+  const { liff, liffError } = useLIFF();
 
-export default function Home({ liff, liffError }) {
   return (
     <div>
-      <Head>
-        <title>LIFF App</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
       <main className={styles.main}>
         <h1>create-liff-app</h1>
         {liff && <p>LIFF init succeeded.</p>}

@@ -0,0 +1,62 @@
+"use client";
+
+import { Liff } from "@line/liff";
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface LIFFContextValue {
+  liff: Liff | null;
+  isLoading: boolean;
+  liffError: string | null;
+}
+
+const LIFFContext = createContext<LIFFContextValue>({
+  liff: null,
+  isLoading: true,
+  liffError: null,
+});
+
+function LIFFProvider({ children }: { children: React.ReactNode }) {
+  const [liffObject, setLiffObject] = useState<Liff | null>(null);
+  const [liffError, setLiffError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Execute liff.init() when the app is initialized
+  useEffect(() => {
+    // to avoid `window is not defined` error
+    import("@line/liff")
+      .then((liff) => liff.default)
+      .then((liff) => {
+        console.log("LIFF init...");
+        liff
+          .init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! })
+          .then(() => {
+            console.log("LIFF init succeeded.");
+            setLiffObject(liff);
+          })
+          .catch((error: Error) => {
+            console.log("LIFF init failed.");
+            setLiffError(error.toString());
+          })
+          .finally(() => {
+            setIsLoading(false);
+          });
+      });
+  }, []);
+
+  const value: LIFFContextValue = {
+    liff: liffObject,
+    isLoading,
+    liffError: liffError,
+  };
+  return <LIFFContext.Provider value={value}>{children}</LIFFContext.Provider>;
+}
+
+function useLIFF(): LIFFContextValue {
+  const liff = useContext(LIFFContext);
+  if (!liff) {
+    throw new Error("useLIFF must be used within a LIFFProvider");
+  }
+  return liff;
+}
+
+export { LIFFProvider, useLIFF };
@@ -0,0 +1,23 @@
+import { LIFFProvider } from "../providers/liff-providers";
+
+export const metadata = {
+  title: "LIFF App",
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export const viewport = {
+  width: "device-width",
+  initialScale: 1.0,
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="jp">
+      <body>
+        <LIFFProvider>{children}</LIFFProvider>
+      </body>
+    </html>
+  );
+}
@@ -1,20 +1,12 @@
-import type { Liff } from "@line/liff";
-import type { NextPage } from "next";
-import Head from "next/head";
-import styles from "../styles/Home.module.css";
+"use client";
+import { useLIFF } from "../providers/liff-providers";
+import styles from "../styles/App.module.css";
+
+export default function Home() {
+  const { liff, liffError } = useLIFF();
 
-const Home: NextPage<{ liff: Liff | null; liffError: string | null }> = ({
-  liff,
-  liffError
-}) => {
   return (
     <div>
-      <Head>
-        <title>LIFF App</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
       <main className={styles.main}>
         <h1>create-liff-app</h1>
         {liff && <p>LIFF init succeeded.</p>}
@@ -36,6 +28,4 @@ const Home: NextPage<{ liff: Liff | null; liffError: string | null }> = ({
       </main>
     </div>
   );
-};
-
-export default Home;
+}
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+const LIFFContext = createContext({
+  liff: null,
+  liffError: null,
+});
+
+function LIFFProvider({ children }) {
+  const [liffObject, setLiffObject] = useState(null);
+  const [liffError, setLiffError] = useState(null);
+
+  // 在组件挂载时执行 liff.init()
+  useEffect(() => {
+    // 动态导入 @line/liff，以避免在 Next.js 服务端渲染时出现 window is not defined 的错误
+    import("@line/liff")
+      .then((liff) => liff.default)
+      .then((liff) => {
+        console.log("LIFF init...");
+        const liffId = process.env.NEXT_PUBLIC_LIFF_ID;
+        if (!liffId) {
+          throw new Error("NEXT_PUBLIC_LIFF_ID is not defined.");
+        }
+
+        liff
+          .init({ liffId: liffId })
+          .then(() => {
+            console.log("LIFF init succeeded.");
+            setLiffObject(liff);
+          })
+          .catch((error) => {
+            console.log("LIFF init failed.");
+            setLiffError(error.toString());
+          });
+      })
+      .catch((error) => {
+        console.log("LIFF init failed.");
+        setLiffError(error.toString());
+      });
+  }, []);
+
+  const value = {
+    liff: liffObject,
+    liffError: liffError,
+  };
+
+  return <LIFFContext.Provider value={value}>{children}</LIFFContext.Provider>;
+}
+
+function useLIFF() {
+  const context = useContext(LIFFContext);
+
+  if (context === undefined) {
+    throw new Error("useLIFF must be used within a LIFFProvider");
+  }
+
+  return context;
+}
+
+export { LIFFProvider, useLIFF };