diff --git a/examples/with-mantine/.gitignore b/examples/with-mantine/.gitignore new file mode 100644 index 000000000000..737d87210923 --- /dev/null +++ b/examples/with-mantine/.gitignore @@ -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 diff --git a/examples/with-mantine/README.md b/examples/with-mantine/README.md new file mode 100644 index 000000000000..74a65f6e4c1b --- /dev/null +++ b/examples/with-mantine/README.md @@ -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)). diff --git a/examples/with-mantine/components/Card.tsx b/examples/with-mantine/components/Card.tsx new file mode 100644 index 000000000000..965be639fef8 --- /dev/null +++ b/examples/with-mantine/components/Card.tsx @@ -0,0 +1,52 @@ +import { Anchor, Text } from '@mantine/core' + +type Props = { + title: string + description: string + link: string +} + +const Card = (props: Props) => { + return ( + + + {props.title} + + + {props.description} + + + ) +} + +export default Card diff --git a/examples/with-mantine/components/Grid.tsx b/examples/with-mantine/components/Grid.tsx new file mode 100644 index 000000000000..d9c8e3b74bc3 --- /dev/null +++ b/examples/with-mantine/components/Grid.tsx @@ -0,0 +1,28 @@ +import { Box } from '@mantine/core' +import { ReactNode } from 'react' + +type Props = { + children: ReactNode +} + +const Grid = (props: Props) => { + return ( + + {props.children} + + ) +} + +export default Grid diff --git a/examples/with-mantine/next-env.d.ts b/examples/with-mantine/next-env.d.ts new file mode 100644 index 000000000000..4f11a03dc6cc --- /dev/null +++ b/examples/with-mantine/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-mantine/next.config.js b/examples/with-mantine/next.config.js new file mode 100644 index 000000000000..a843cbee09af --- /dev/null +++ b/examples/with-mantine/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/examples/with-mantine/package.json b/examples/with-mantine/package.json new file mode 100644 index 000000000000..c7f762bc68cb --- /dev/null +++ b/examples/with-mantine/package.json @@ -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" + } +} diff --git a/examples/with-mantine/pages/_app.tsx b/examples/with-mantine/pages/_app.tsx new file mode 100644 index 000000000000..ad9abbd1c240 --- /dev/null +++ b/examples/with-mantine/pages/_app.tsx @@ -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 ( + + + + ) +} + +export default MyApp diff --git a/examples/with-mantine/pages/_document.tsx b/examples/with-mantine/pages/_document.tsx new file mode 100644 index 000000000000..3cc83f70bcb9 --- /dev/null +++ b/examples/with-mantine/pages/_document.tsx @@ -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 ( + + + +
+ + + + ) + } +} diff --git a/examples/with-mantine/pages/index.tsx b/examples/with-mantine/pages/index.tsx new file mode 100644 index 000000000000..378dd19512fd --- /dev/null +++ b/examples/with-mantine/pages/index.tsx @@ -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 ( + + + Create Next App + + + + + + + Welcome to Next.js! + + + + Get started by editing{' '} + + pages/index.tsx + + + + + + + + + + + + + + Powered by{' '} + + Vercel Logo + + + + + ) +} + +export default Home diff --git a/examples/with-mantine/prettier.config.js b/examples/with-mantine/prettier.config.js new file mode 100644 index 000000000000..3f714ac456ec --- /dev/null +++ b/examples/with-mantine/prettier.config.js @@ -0,0 +1,4 @@ +module.exports = { + singleQuote: true, + semi: false, +} diff --git a/examples/with-mantine/public/favicon.ico b/examples/with-mantine/public/favicon.ico new file mode 100644 index 000000000000..718d6fea4835 Binary files /dev/null and b/examples/with-mantine/public/favicon.ico differ diff --git a/examples/with-mantine/public/vercel.svg b/examples/with-mantine/public/vercel.svg new file mode 100644 index 000000000000..fbf0e25a651c --- /dev/null +++ b/examples/with-mantine/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-mantine/styles/globals.css b/examples/with-mantine/styles/globals.css new file mode 100644 index 000000000000..e5e2dcc23baf --- /dev/null +++ b/examples/with-mantine/styles/globals.css @@ -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; +} diff --git a/examples/with-mantine/tsconfig.json b/examples/with-mantine/tsconfig.json new file mode 100644 index 000000000000..99710e857874 --- /dev/null +++ b/examples/with-mantine/tsconfig.json @@ -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"] +}