diff --git a/app/[...all]/page.tsx b/app/[...all]/page.tsx
new file mode 100644
index 0000000..044dbe8
--- /dev/null
+++ b/app/[...all]/page.tsx
@@ -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 ;
+}
diff --git a/pages/_app.tsx b/app/layout.tsx
similarity index 58%
rename from pages/_app.tsx
rename to app/layout.tsx
index 7faff10..ef93351 100644
--- a/pages/_app.tsx
+++ b/app/layout.tsx
@@ -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,27 @@ 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 (
- <>
-
-
-
-
-
-
-
+
+ {children}
+
+
+
);
}
-
-export default MyApp;
diff --git a/pages/[...all].tsx b/app/page.tsx
similarity index 80%
rename from pages/[...all].tsx
rename to app/page.tsx
index 9b74aa5..e92a5de 100644
--- a/pages/[...all].tsx
+++ b/app/page.tsx
@@ -4,6 +4,6 @@ const App = dynamic(() => import('../components/AppShell'), {
ssr: false,
});
-export default function Index() {
+export default function Page() {
return ;
}
diff --git a/components/AppShell.tsx b/components/AppShell.tsx
index 2fa58ad..edd9d5d 100644
--- a/components/AppShell.tsx
+++ b/components/AppShell.tsx
@@ -1,19 +1,15 @@
-import { IonApp, IonLabel, IonRouterOutlet, setupIonicReact, IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react';
-import { cog, flash, list } from 'ionicons/icons';
+'use client';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { StatusBar, Style } from '@capacitor/status-bar';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
-import Feed from './pages/Feed';
-import Lists from './pages/Lists';
-import ListDetail from './pages/ListDetail';
-import Settings from './pages/Settings';
import Tabs from './pages/Tabs';
setupIonicReact({});
-window.matchMedia("(prefers-color-scheme: dark)").addListener(async (status) => {
+window.matchMedia('(prefers-color-scheme: dark)').addListener(async status => {
try {
await StatusBar.setStyle({
style: status.matches ? Style.Dark : Style.Light,
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index 9b74aa5..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import dynamic from 'next/dynamic';
-
-const App = dynamic(() => import('../components/AppShell'), {
- ssr: false,
-});
-
-export default function Index() {
- return ;
-}