app router structure support

2024-02-26 00:49:35 -08:00
parent 39fac554ee
commit fb6f86c563
5 changed files with 37 additions and 25 deletions
@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+
+const App = dynamic(() => import('../../components/AppShell'), {
+  ssr: false,
+});
+
+export function generateStaticParams() {
+  return [{ all: ['tabs', 'feed'] }]
+}
+
+export default function Page() {
+  return <App />;
+}
@@ -1,7 +1,5 @@
-import Head from 'next/head';
+import type { Metadata, Viewport } from "next";
 import Script from 'next/script';
-import { AppProps } from 'next/app'
-import { setupIonicReact } from '@ionic/react';

 import 'tailwindcss/tailwind.css';
 /* Core CSS required for Ionic components to work properly */
@@ -23,23 +21,32 @@ import '@ionic/react/css/display.css';
 import '../styles/global.css';
 import '../styles/variables.css';

-function MyApp({ Component, pageProps }: AppProps) {
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export const viewport: Viewport = {
+  initialScale: 1,
+  width: 'device-width',
+  viewportFit: 'cover'
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
  return (
-    <>
-      <Head>
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-        ></meta>
-      </Head>
-      <Component {...pageProps} />
+    <html lang="en">
      <Script
        type="module"
        src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"
      ></Script>
      <Script noModule src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"></Script>
-    </>
+      <body>{children}</body>
+    </html>
  );
 }

-export default MyApp;
+
@@ -4,6 +4,6 @@ const App = dynamic(() => import('../components/AppShell'), {
  ssr: false,
 });

-export default function Index() {
+export default function Page() {
  return <App />;
 }
@@ -1,3 +1,4 @@
+'use client'
 import { IonApp, IonLabel, IonRouterOutlet, setupIonicReact, IonTabs, IonTabBar, IonTabButton, IonIcon  } from '@ionic/react';
 import { cog, flash, list } from 'ionicons/icons';
 import { StatusBar, Style } from '@capacitor/status-bar';
@@ -1,9 +0,0 @@
-import dynamic from 'next/dynamic';
-
-const App = dynamic(() => import('../components/AppShell'), {
-  ssr: false,
-});
-
-export default function Index() {
-  return <App />;
-}