Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding Typescript and Mantine example (#36294)
## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint`
- Loading branch information
Showing
15 changed files
with
385 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# 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 | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
.pnpm-debug.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# TypeScript & Mantine Next.js example | ||
|
||
This is a simple project that shows the usage of Next.js with TypeScript and Mantine. | ||
|
||
## 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-typescript-mantine) | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript-mantine&project-name=with-typescript-mantine&repository-name=with-typescript-mantine) | ||
|
||
## How to use it? | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example with-mantine with-mantine-app | ||
# or | ||
yarn create next-app --example with-mantine with-mantine-app | ||
# or | ||
pnpm create next-app -- --example with-mantine with-mantine-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)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { Anchor, Text } from '@mantine/core' | ||
|
||
type Props = { | ||
title: string | ||
description: string | ||
link: string | ||
} | ||
|
||
const Card = (props: Props) => { | ||
return ( | ||
<Anchor | ||
href={props.link} | ||
target="_blank" | ||
sx={{ | ||
border: '1px solid #eaeaea', | ||
margin: '1rem', | ||
padding: '1.5rem', | ||
borderRadius: '10px', | ||
textAlign: 'left', | ||
color: 'black', | ||
maxWidth: '300px', | ||
transition: 'all 0.3s ease-in-out', | ||
'&:hover': { | ||
borderColor: '#0070f3', | ||
color: '#0070f3', | ||
}, | ||
}} | ||
> | ||
<Text | ||
component="h2" | ||
sx={{ | ||
fontSize: '1.5rem', | ||
fontWeight: 'bold', | ||
textAlign: 'left', | ||
}} | ||
> | ||
{props.title} | ||
</Text> | ||
<Text | ||
component="p" | ||
sx={{ | ||
fontSize: '1rem', | ||
textAlign: 'left', | ||
}} | ||
> | ||
{props.description} | ||
</Text> | ||
</Anchor> | ||
) | ||
} | ||
|
||
export default Card |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { Box } from '@mantine/core' | ||
import { ReactNode } from 'react' | ||
|
||
type Props = { | ||
children: ReactNode | ||
} | ||
|
||
const Grid = (props: Props) => { | ||
return ( | ||
<Box | ||
sx={{ | ||
display: 'grid', | ||
gridTemplateColumns: 'repeat(2, minmax(200px, 1fr))', | ||
gridGap: '1rem', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
'@media (max-width: 800px)': { | ||
gridTemplateColumns: 'repeat(1, minmax(200px, 1fr))', | ||
gridGap: '0.2rem', | ||
}, | ||
}} | ||
> | ||
{props.children} | ||
</Box> | ||
) | ||
} | ||
|
||
export default Grid |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = { | ||
reactStrictMode: true, | ||
} | ||
|
||
module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"@mantine/core": "^4.1.4", | ||
"@mantine/hooks": "^4.1.4", | ||
"@mantine/next": "^4.1.4", | ||
"next": "latest", | ||
"react": "18.0.0", | ||
"react-dom": "18.0.0" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "17.0.25", | ||
"@types/react": "18.0.5", | ||
"@types/react-dom": "18.0.1", | ||
"prettier": "2.6.2", | ||
"typescript": "4.6.3" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import '../styles/globals.css' | ||
import type { AppProps } from 'next/app' | ||
import { MantineProvider } from '@mantine/core' | ||
|
||
function MyApp({ Component, pageProps }: AppProps) { | ||
return ( | ||
<MantineProvider | ||
withGlobalStyles | ||
withNormalizeCSS | ||
theme={{ | ||
colorScheme: 'light', | ||
breakpoints: { | ||
xs: 500, | ||
sm: 800, | ||
md: 1000, | ||
lg: 1200, | ||
xl: 1400, | ||
}, | ||
}} | ||
> | ||
<Component {...pageProps} /> | ||
</MantineProvider> | ||
) | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { createGetInitialProps } from '@mantine/next' | ||
import Document, { Head, Html, Main, NextScript } from 'next/document' | ||
|
||
const getInitialProps = createGetInitialProps() | ||
|
||
export default class _Document extends Document { | ||
static getInitialProps = getInitialProps | ||
|
||
render() { | ||
return ( | ||
<Html> | ||
<Head /> | ||
<body> | ||
<Main /> | ||
<NextScript /> | ||
</body> | ||
</Html> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
import type { NextPage } from 'next' | ||
import Head from 'next/head' | ||
import Image from 'next/image' | ||
import { Box, Code, Text } from '@mantine/core' | ||
import Card from '../components/Card' | ||
import Grid from '../components/Grid' | ||
|
||
const Home: NextPage = () => { | ||
return ( | ||
<Box | ||
component="main" | ||
sx={{ | ||
paddingLeft: '2rem', | ||
paddingRight: '2rem', | ||
}} | ||
> | ||
<Head> | ||
<title>Create Next App</title> | ||
<meta name="description" content="Generated by create next app" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<Box | ||
component="main" | ||
sx={{ | ||
minHeight: '100vh', | ||
display: 'flex', | ||
paddingTop: '2rem', | ||
paddingBottom: '2rem', | ||
flexDirection: 'column', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Text | ||
sx={{ | ||
color: '#0070f3', | ||
fontSize: '2rem', | ||
'@media (min-width: 800px)': { | ||
fontSize: '3rem', | ||
}, | ||
fontWeight: 'bold', | ||
textAlign: 'center', | ||
}} | ||
> | ||
Welcome to <a href="https://nextjs.org">Next.js!</a> | ||
</Text> | ||
|
||
<Text | ||
sx={{ | ||
color: 'black', | ||
fontSize: '0.9rem', | ||
'@media (min-width: 700px)': { | ||
fontSize: '1.2rem', | ||
}, | ||
padding: '1rem', | ||
textAlign: 'center', | ||
}} | ||
> | ||
Get started by editing{' '} | ||
<Code | ||
sx={{ | ||
color: 'black', | ||
fontSize: '0.8rem', | ||
textAlign: 'center', | ||
}} | ||
> | ||
pages/index.tsx | ||
</Code> | ||
</Text> | ||
|
||
<Grid> | ||
<Card | ||
title="Documentation →" | ||
description="Find in-depth information about Next.js features and API." | ||
link="https://nextjs.org/docs" | ||
/> | ||
<Card | ||
title="Learn →" | ||
description="Learn about Next.js in an interactive course with quizzes!" | ||
link="https://nextjs.org/learn" | ||
/> | ||
<Card | ||
title="Examples →" | ||
description="Discover and deploy boilerplate example Next.js projects." | ||
link="https://nextjs.org/examples" | ||
/> | ||
<Card | ||
title="Deploy →" | ||
description="Instantly deploy your Next.js site to a public URL with Vercel." | ||
link="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
/> | ||
</Grid> | ||
</Box> | ||
|
||
<Box | ||
component="footer" | ||
sx={{ | ||
display: 'flex', | ||
flex: '1', | ||
paddingTop: '2rem', | ||
paddingBottom: '2rem', | ||
borderTop: '1px solid #eaeaea', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<a | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<Box component="span" sx={{ height: '1rem', marginLeft: '1.5rem' }}> | ||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> | ||
</Box> | ||
</a> | ||
</Box> | ||
</Box> | ||
) | ||
} | ||
|
||
export default Home |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
module.exports = { | ||
singleQuote: true, | ||
semi: false, | ||
} |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
html, | ||
body { | ||
padding: 0; | ||
margin: 0; | ||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, | ||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; | ||
} | ||
|
||
a { | ||
color: inherit; | ||
text-decoration: none; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"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", | ||
"incremental": true | ||
}, | ||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], | ||
"exclude": ["node_modules"] | ||
} |