updated with-ionic-typescript example to utilize the App Router. (#73418

)

This PR updates the with-ionic-typescript example for using the App
Router.
Here are the changes that have been made:

- I renamed the `pages` folder and moved it to the `app` folder.
- Added the `layout.tsx` file as part of the App Router.
- Updated the `package.json` file.

CC: @samcx

---------

Co-authored-by: Sam Ko <[email protected]>

examples/with-ionic-typescript/.gitignore → examples/with-ionic/.gitignore

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,6 +28,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*.local

examples/with-ionic-typescript/README.md → examples/with-ionic/README.md

@@ -1,27 +1,27 @@
 # Ionic with TypeScript Example
 
-Example app using Next.js with [Ionic](https://ionicframework.com/) and [TypeScript](https://www.typescriptlang.org/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs).
+Example app using Next.js with [Ionic](https://ionicframework.com/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs).
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic-typescript)
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript&project-name=with-ionic-typescript&repository-name=with-ionic-typescript)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic&project-name=with-ionic&repository-name=with-ionic)
 
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-ionic-typescript with-ionic-typescript-app
+npx create-next-app --example with-ionic with-ionic-app
 ```
 
 ```bash
-yarn create next-app --example with-ionic-typescript with-ionic-typescript-app
+yarn create next-app --example with-ionic with-ionic-app
 ```
 
 ```bash
-pnpm create next-app --example with-ionic-typescript with-ionic-typescript-app
+pnpm create next-app --example with-ionic with-ionic-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-ionic/_components/Card.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+
+type CardProps = {
+  imageSrc: string;
+  title: string;
+  subtitle: string;
+  content: string;
+};
+
+export default function Card({
+  imageSrc,
+  title,
+  subtitle,
+  content,
+}: CardProps) {
+  return (
+    <ion-card>
+      <Image
+        src={imageSrc}
+        alt={`Image of ${title}`}
+        width={320}
+        height={320}
+        priority={true}
+      />
+      <ion-card-header>
+        <ion-card-subtitle>{subtitle}</ion-card-subtitle>
+        <ion-card-title>{title}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-icon name="pin" slot="start"></ion-icon>
+        {content}
+      </ion-card-content>
+    </ion-card>
+  );
+}

examples/with-ionic/_components/IonicLayout.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader";
+
+export default function IonicLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    ionDefineCustomElements(window);
+  }, []);
+
+  return (
+    <ion-app>
+      <ion-header translucent>
+        <ion-toolbar>
+          <ion-title>Next.js with Ionic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen>{children}</ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  );
+}

examples/with-ionic/app/layout.tsx

@@ -0,0 +1,22 @@
+import "@ionic/core/css/core.css";
+import "@ionic/core/css/normalize.css";
+import "@ionic/core/css/structure.css";
+import "@ionic/core/css/typography.css";
+import "@ionic/core/css/padding.css";
+import "@ionic/core/css/float-elements.css";
+import "@ionic/core/css/text-alignment.css";
+import "@ionic/core/css/text-transformation.css";
+import "@ionic/core/css/flex-utils.css";
+import "@ionic/core/css/display.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

examples/with-ionic/app/page.tsx

@@ -0,0 +1,31 @@
+import IonicLayout from "@/_components/IonicLayout";
+import CardComponent from "@/_components/Card";
+
+export default function Home() {
+  const destinations = new Array(8).fill({
+    imageSrc: "/img/cat.jpg",
+    title: "Madison, WI",
+    subtitle: "Destination",
+    content:
+      "Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.",
+  });
+
+  return (
+    <IonicLayout>
+      <ion-grid>
+        <ion-row>
+          {destinations.map((destination, i) => (
+            <ion-col key={i} size="3">
+              <CardComponent
+                imageSrc={destination.imageSrc}
+                title={destination.title}
+                subtitle={destination.subtitle}
+                content={destination.content}
+              />
+            </ion-col>
+          ))}
+        </ion-row>
+      </ion-grid>
+    </IonicLayout>
+  );
+}

examples/with-ionic/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

examples/with-ionic/package.json

@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ionic/core": "^8.4.1",
+    "ionicons": "^7.4.0",
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "typescript": "^5.7.2"
+  }
+}

examples/with-ionic/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

test/turbopack-dev-examples-manifest.json

@@ -120,7 +120,7 @@
   "with-http2": true,
   "with-i18n-next-intl": true,
   "with-i18n-rosetta": true,
-  "with-ionic-typescript": true,
+  "with-ionic": true,
   "with-iron-session": true,
   "with-jest": true,
   "with-jest-babel": true,