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

40
examples/with-react-native-web/.gitignore vendored Normal file
View File

@@ -0,0 +1,40 @@
# 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*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

29
examples/with-react-native-web/README.md Normal file
View File

@@ -0,0 +1,29 @@
# React Native Web example
This example features how to use [react-native-web](https://github.com/necolas/react-native-web) to bring the platform-agnostic Components and APIs of React Native to the web.
> **High-quality user interfaces**: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
>
> **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
## 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-react-native-web&project-name=with-react-native-web&repository-name=with-react-native-web)
## 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-react-native-web with-react-native-web-app
```
```bash
yarn create next-app --example with-react-native-web with-react-native-web-app
```
```bash
pnpm create next-app --example with-react-native-web with-react-native-web-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)).

4
examples/with-react-native-web/app.json Normal file
View File

@@ -0,0 +1,4 @@
{
"name": "with-react-native-web",
"displayName": "with-react-native-web"
}

36
examples/with-react-native-web/next.config.js Normal file
View File

@@ -0,0 +1,36 @@
/** @type {import('next').NextConfig} */
module.exports = {
turbopack: {
resolveAlias: {
"react-native": "react-native-web",
},
resolveExtensions: [
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
".mdx",
".tsx",
".ts",
".jsx",
".js",
".mjs",
".json",
],
},
webpack: (config) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
"react-native$": "react-native-web",
};
config.resolve.extensions = [
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
...config.resolve.extensions,
];
return config;
},
};

14
examples/with-react-native-web/package.json Normal file
View File

@@ -0,0 +1,14 @@
{
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-web": "^0.18.9"
}
}

15
examples/with-react-native-web/pages/_app.js Normal file
View File

@@ -0,0 +1,15 @@
import * as React from "react";
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;

37
examples/with-react-native-web/pages/_document.js Normal file
View File

@@ -0,0 +1,37 @@
import { Children } from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { AppRegistry } from "react-native";
import config from "../app.json";
// Force Next-generated DOM elements to fill their parent's height
const normalizeNextElements = `
#__next {
display: flex;
flex-direction: column;
height: 100%;
}
`;
export default class MyDocument extends Document {
static async getInitialProps({ renderPage }) {
AppRegistry.registerComponent(config.name, () => Main);
const { getStyleElement } = AppRegistry.getApplication(config.name);
const page = await renderPage();
const styles = [
<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
getStyleElement(),
];
return { ...page, styles: Children.toArray(styles) };
}
render() {
return (
<Html style={{ height: "100%" }}>
<Head />
<body style={{ height: "100%", overflow: "hidden" }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}

31
examples/with-react-native-web/pages/alternate.js Normal file
View File

@@ -0,0 +1,31 @@
import { StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
container: {
alignItems: "center",
flexGrow: 1,
justifyContent: "center",
},
text: {
alignItems: "center",
fontSize: 24,
marginBottom: 24,
},
link: {
color: "blue",
},
});
export default function Alternate() {
return (
<View style={styles.container}>
<Text accessibilityRole="header" style={styles.text}>
Alternate Page
</Text>
<Text style={styles.link} accessibilityRole="link" href={`/`}>
Go Back
</Text>
</View>
);
}

41
examples/with-react-native-web/pages/index.js Normal file
View File

@@ -0,0 +1,41 @@
import { StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
container: {
alignItems: "center",
flexGrow: 1,
justifyContent: "center",
},
link: {
color: "blue",
},
textContainer: {
alignItems: "center",
marginTop: 16,
},
text: {
alignItems: "center",
fontSize: 24,
marginBottom: 24,
},
});
export default function App(props) {
return (
<View style={styles.container}>
<Text accessibilityRole="header" style={styles.text}>
React Native for Web & Next.js
</Text>
<Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
A universal link
</Text>
<View style={styles.textContainer}>
<Text accessibilityRole="header" aria-level="2" style={styles.text}>
Subheader
</Text>
</View>
</View>
);
}