-
Notifications
You must be signed in to change notification settings - Fork 26.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
example: with-mantine #34591
example: with-mantine #34591
Changes from 4 commits
ef26e97
48f397b
9d5a0c2
e0f31b4
ee1ded3
391492a
0ee460d
34e6f93
145d163
b432ab7
e848fb2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,3 +33,4 @@ yarn-error.log* | |
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,31 @@ | ||
# TypeScript & Mantine Next.js example | ||
# Example app with mantine | ||
|
||
This is a simple project that shows the usage of Next.js with TypeScript and Mantine. | ||
This example features how you use [mantine](https://github.com/mantine/mantine), a React component library. | ||
|
||
## Preview | ||
|
||
Preview the example live on [StackBlitz](http://stackblitz.com/): | ||
|
||
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-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 the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
[![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) | ||
[![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-mantine&project-name=with-mantine&repository-name=with-mantine) | ||
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## How to use it? | ||
## 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) 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)). | ||
|
||
### Try it on CodeSandbox | ||
|
||
[Open this example on CodeSandbox](https://codesandbox.io/s/github/vercel/next.js/tree/canary/examples/with-mantine) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should not change to align with the other examples.
balazsorban44 marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import Head from 'next/head'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is already a |
||
import { MantineProvider } from '@mantine/core'; | ||
|
||
export default function App(props) { | ||
const { Component, pageProps } = props; | ||
|
||
return ( | ||
<> | ||
<Head> | ||
<title>Page title</title> | ||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> | ||
</Head> | ||
|
||
<MantineProvider | ||
withGlobalStyles | ||
withNormalizeCSS | ||
theme={{ | ||
/** Put your mantine theme override here */ | ||
colorScheme: 'light', | ||
}} | ||
> | ||
<Component {...pageProps} /> | ||
</MantineProvider> | ||
</> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import Document from 'next/document'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is already a |
||
import { createGetInitialProps } from '@mantine/next'; | ||
|
||
const getInitialProps = createGetInitialProps(); | ||
|
||
export default class MyDocument extends Document { | ||
static getInitialProps = getInitialProps; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { Title, Text, Anchor } from '@mantine/core'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is already a |
||
|
||
export default function HomePage() { | ||
return ( | ||
<> | ||
<Title sx={{ fontSize: 100, fontWeight: 900, letterSpacing: -2 }} align="center" mt={100}> | ||
Welcome to{' '} | ||
<Text inherit variant="gradient" component="span"> | ||
Mantine | ||
</Text> | ||
</Title> | ||
<Text color="dimmed" align="center" size="lg" sx={{ maxWidth: 580 }} mx="auto" mt="xl"> | ||
This starter Next.js projects includes a minimal setup for server side rendering, if you | ||
want to learn more on Mantine + Next.js integration follow{' '} | ||
<Anchor href="https://mantine.dev/theming/next/" size="lg"> | ||
this guide | ||
</Anchor> | ||
. To get started edit index.tsx file. | ||
</Text> | ||
</> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should not change, to align with the other examples