rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
examples/with-ionic/.gitignore vendored Normal file
View File

@@ -0,0 +1,41 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

25
examples/with-ionic/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Ionic with TypeScript Example
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 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 with-ionic-app
```
```bash
yarn create next-app --example with-ionic with-ionic-app
```
```bash
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)).

35
examples/with-ionic/_components/Card.tsx Normal file
View File

@@ -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>
);
}

30
examples/with-ionic/_components/IonicLayout.tsx Normal file
View File

@@ -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>
);
}

BIN
examples/with-ionic/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

22
examples/with-ionic/app/layout.tsx Normal file
View File

@@ -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>
);
}

31
examples/with-ionic/app/page.tsx Normal file
View File

@@ -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>
);
}

24
examples/with-ionic/ionic.d.ts vendored Normal file
View File

@@ -0,0 +1,24 @@
import { ReactText, HTMLAttributes } from "react";
import { JSX as LocalJSX } from "@ionic/core";
import { JSX as IoniconsJSX } from "ionicons";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import IonicIntrinsicElements = LocalJSX.IntrinsicElements;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements;
type ToReact<T> = {
[P in keyof T]?: T[P] &
Omit<HTMLAttributes<Element>, "className"> & {
class?: string;
key?: ReactText;
};
};
declare global {
export namespace JSX {
interface IntrinsicElements
extends ToReact<IonicIntrinsicElements & IoniconsIntrinsicElements> {
key?: string;
}
}
}

7
examples/with-ionic/next.config.ts Normal file
View File

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

20
examples/with-ionic/package.json Normal file
View File

@@ -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"
}
}

BIN
examples/with-ionic/public/img/cat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

1
examples/with-ionic/public/svg/pin.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M336 96a80 80 0 10-96 78.39v283.17a32.09 32.09 0 002.49 12.38l10.07 24a3.92 3.92 0 006.88 0l10.07-24a32.09 32.09 0 002.49-12.38V174.39A80.13 80.13 0 00336 96zm-56 0a24 24 0 1124-24 24 24 0 01-24 24z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 294 B

27
examples/with-ionic/tsconfig.json Normal file
View File

@@ -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": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}