mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 22:42:51 +08:00
chore(examples): upgrade next examples for scaleable (#564)
This commit is contained in:
witt
30
examples/create-next-app/.gitignore
vendored
30
examples/create-next-app/.gitignore
vendored
@@ -1,30 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
@@ -1,4 +1,4 @@
|
||||
# Next.js demo for Geist UI React
|
||||
# Next.js demo for Geist UI
|
||||
|
||||
## Getting Started
|
||||
|
||||
@@ -12,7 +12,7 @@ yarn dev
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
## Learn More
|
||||
|
||||
|
||||
3
examples/create-next-app/next-env.d.ts
vendored
Normal file
3
examples/create-next-app/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
3
examples/create-next-app/next.config.js
Normal file
3
examples/create-next-app/next.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "create-next-app",
|
||||
"name": "geist-ui-nextjs",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -8,9 +8,13 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@geist-ui/react": "latest",
|
||||
"next": "9.4.2",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1"
|
||||
"@geist-ui/react": "dev",
|
||||
"next": "11.0.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "17.0.11",
|
||||
"typescript": "4.3.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { AppProps } from 'next/app'
|
||||
import { GeistProvider, CssBaseline } from '@geist-ui/react'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<GeistProvider>
|
||||
<CssBaseline />
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Page, Text } from '@geist-ui/react'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Page dotBackdrop size="mini">
|
||||
<Page.Header>
|
||||
<Text h2>React Application with Geist UI</Text>
|
||||
</Page.Header>
|
||||
<Text>
|
||||
Hello, I am using <Text b>Geist UI</Text> !
|
||||
</Text>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
51
examples/create-next-app/pages/index.tsx
Normal file
51
examples/create-next-app/pages/index.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import Head from 'next/head'
|
||||
import { Page, Text, Image, Display, Button, Grid } from '@geist-ui/react'
|
||||
|
||||
export default function Home() {
|
||||
const gh = 'https://github.com/geist-org/react'
|
||||
const docs = 'https://react.geist-ui.dev'
|
||||
const redirect = (url: string) => {
|
||||
window.open(url)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Geist UI with NextJS</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Page dotBackdrop width="800px" padding={0}>
|
||||
<Display
|
||||
title="Geist UI"
|
||||
caption={
|
||||
<>
|
||||
Welcome to{' '}
|
||||
<Text span b>
|
||||
Geist UI
|
||||
</Text>{' '}
|
||||
and start learning more !
|
||||
</>
|
||||
}>
|
||||
<Image src="/geist-banner.png" draggable={false} />
|
||||
</Display>
|
||||
<Grid.Container justify="center" gap={3} mt="100px">
|
||||
<Grid xs={20} sm={7} justify="center">
|
||||
<Button
|
||||
shadow
|
||||
type="secondary-light"
|
||||
width="100%"
|
||||
onClick={() => redirect(gh)}>
|
||||
GitHub Repo
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid xs={0} sm={3} />
|
||||
<Grid xs={20} sm={7} justify="center">
|
||||
<Button width="100%" onClick={() => redirect(docs)}>
|
||||
Documentation Site
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid.Container>
|
||||
</Page>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
BIN
examples/create-next-app/public/geist-banner.png
Normal file
BIN
examples/create-next-app/public/geist-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
19
examples/create-next-app/tsconfig.json
Normal file
19
examples/create-next-app/tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user