From 43c5632ad051a82e813b826295fa647d81592b32 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Tue, 25 Aug 2020 12:02:34 -0300 Subject: [PATCH 1/8] add with-chakra-ui-typescript example --- examples/with-chakra-ui-typescript/.gitignore | 34 +++++++++++ examples/with-chakra-ui-typescript/README.md | 52 +++++++++++++++++ .../with-chakra-ui-typescript/next-env.d.ts | 2 + .../with-chakra-ui-typescript/package.json | 26 +++++++++ .../src/components/CTA.tsx | 31 ++++++++++ .../src/components/Container.tsx | 19 +++++++ .../src/components/DarkModeSwitch.tsx | 16 ++++++ .../src/components/Footer.tsx | 5 ++ .../src/components/Hero.tsx | 11 ++++ .../src/components/Main.tsx | 13 +++++ .../src/pages/_app.tsx | 17 ++++++ .../src/pages/index.tsx | 56 +++++++++++++++++++ .../with-chakra-ui-typescript/src/theme.tsx | 38 +++++++++++++ .../with-chakra-ui-typescript/tsconfig.json | 23 ++++++++ 14 files changed, 343 insertions(+) create mode 100644 examples/with-chakra-ui-typescript/.gitignore create mode 100644 examples/with-chakra-ui-typescript/README.md create mode 100644 examples/with-chakra-ui-typescript/next-env.d.ts create mode 100644 examples/with-chakra-ui-typescript/package.json create mode 100644 examples/with-chakra-ui-typescript/src/components/CTA.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Container.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Footer.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Hero.tsx create mode 100644 examples/with-chakra-ui-typescript/src/components/Main.tsx create mode 100644 examples/with-chakra-ui-typescript/src/pages/_app.tsx create mode 100644 examples/with-chakra-ui-typescript/src/pages/index.tsx create mode 100644 examples/with-chakra-ui-typescript/src/theme.tsx create mode 100644 examples/with-chakra-ui-typescript/tsconfig.json diff --git a/examples/with-chakra-ui-typescript/.gitignore b/examples/with-chakra-ui-typescript/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/examples/with-chakra-ui-typescript/.gitignore @@ -0,0 +1,34 @@ +# 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* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md new file mode 100644 index 0000000000000..918ae65a0ce02 --- /dev/null +++ b/examples/with-chakra-ui-typescript/README.md @@ -0,0 +1,52 @@ +# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and Typescript + +This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with typescript. + +We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui-typescript) + +## How to use + +### Using `create-next-app` + +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-chakra-ui-typescript with-chakra-ui-typescript-app +# or +yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-chakra-ui-typescript +cd with-chakra-ui-typescript +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +## Notes + +Next.js and chakra-ui has built-in TypeScript declarations, so we'll get autocompletion for their modules straight away. + +A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts. + +> All credits for [with-chakra-ui](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and [with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript) contributors. diff --git a/examples/with-chakra-ui-typescript/next-env.d.ts b/examples/with-chakra-ui-typescript/next-env.d.ts new file mode 100644 index 0000000000000..7b7aa2c7727d8 --- /dev/null +++ b/examples/with-chakra-ui-typescript/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json new file mode 100644 index 0000000000000..82965dfcdf0fc --- /dev/null +++ b/examples/with-chakra-ui-typescript/package.json @@ -0,0 +1,26 @@ +{ + "name": "with-chakra-ui-typescript", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "type-check": "tsc" + }, + "dependencies": { + "@chakra-ui/core": "^0.8.0", + "@emotion/core": "^10.0.35", + "@emotion/styled": "^10.0.27", + "emotion-theming": "^10.0.27", + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "devDependencies": { + "@types/node": "^14.6.0", + "@types/react": "^16.9.46", + "@types/react-dom": "^16.9.8", + "typescript": "4.0.2" + }, + "license": "ISC" +} diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx new file mode 100644 index 0000000000000..8dfb365a20a5d --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/CTA.tsx @@ -0,0 +1,31 @@ +import { Link as ChakraLink, Button } from '@chakra-ui/core' + +import { Container } from './Container' + +export const CTA = () => ( + + + + + + + + + +) diff --git a/examples/with-chakra-ui-typescript/src/components/Container.tsx b/examples/with-chakra-ui-typescript/src/components/Container.tsx new file mode 100644 index 0000000000000..8746555f42aac --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/Container.tsx @@ -0,0 +1,19 @@ +import { Flex, useColorMode, FlexProps } from '@chakra-ui/core' + +export const Container = (props: FlexProps) => { + const { colorMode } = useColorMode() + + const bgColor = { light: 'gray.50', dark: 'gray.900' } + + const color = { light: 'black', dark: 'white' } + return ( + + ) +} diff --git a/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx b/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx new file mode 100644 index 0000000000000..f19e44a6c7e63 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/DarkModeSwitch.tsx @@ -0,0 +1,16 @@ +import { useColorMode, Switch } from '@chakra-ui/core' + +export const DarkModeSwitch = () => { + const { colorMode, toggleColorMode } = useColorMode() + const isDark = colorMode === 'dark' + return ( + + ) +} diff --git a/examples/with-chakra-ui-typescript/src/components/Footer.tsx b/examples/with-chakra-ui-typescript/src/components/Footer.tsx new file mode 100644 index 0000000000000..6b6d00e54cede --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/Footer.tsx @@ -0,0 +1,5 @@ +import { Flex, FlexProps } from '@chakra-ui/core' + +export const Footer = (props: FlexProps) => ( + +) diff --git a/examples/with-chakra-ui-typescript/src/components/Hero.tsx b/examples/with-chakra-ui-typescript/src/components/Hero.tsx new file mode 100644 index 0000000000000..f4ed0a9646697 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/Hero.tsx @@ -0,0 +1,11 @@ +import { Flex, Heading } from '@chakra-ui/core' + +export const Hero = ({ title }: { title: string }) => ( + + {title} + +) + +Hero.defaultProps = { + title: 'with-chakra-ui-typescript', +} diff --git a/examples/with-chakra-ui-typescript/src/components/Main.tsx b/examples/with-chakra-ui-typescript/src/components/Main.tsx new file mode 100644 index 0000000000000..771a458f0f556 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/components/Main.tsx @@ -0,0 +1,13 @@ +import { Stack, StackProps } from '@chakra-ui/core' + +export const Main = (props: StackProps) => ( + +) diff --git a/examples/with-chakra-ui-typescript/src/pages/_app.tsx b/examples/with-chakra-ui-typescript/src/pages/_app.tsx new file mode 100644 index 0000000000000..344affee915d1 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/pages/_app.tsx @@ -0,0 +1,17 @@ +import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core' + +import theme from '../theme' +import { AppProps } from 'next/app' + +function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + + + + ) +} + +export default MyApp diff --git a/examples/with-chakra-ui-typescript/src/pages/index.tsx b/examples/with-chakra-ui-typescript/src/pages/index.tsx new file mode 100644 index 0000000000000..46a3d14d7ac60 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/pages/index.tsx @@ -0,0 +1,56 @@ +import { + Link as ChakraLink, + Text, + Code, + Icon, + List, + ListIcon, + ListItem, +} from '@chakra-ui/core' + +import { Hero } from '../components/Hero' +import { Container } from '../components/Container' +import { Main } from '../components/Main' +import { DarkModeSwitch } from '../components/DarkModeSwitch' +import { CTA } from '../components/CTA' +import { Footer } from '../components/Footer' + +const Index = () => ( + + +
+ + Example repository of Next.js + chakra-ui +{' '} + typescript. + + + + + + + Chakra UI + + + + + + Next.js + + + +
+ + +
+ Next ❤️ Chakra +
+ + +) + +export default Index diff --git a/examples/with-chakra-ui-typescript/src/theme.tsx b/examples/with-chakra-ui-typescript/src/theme.tsx new file mode 100644 index 0000000000000..55da7272037a1 --- /dev/null +++ b/examples/with-chakra-ui-typescript/src/theme.tsx @@ -0,0 +1,38 @@ +import { theme as chakraTheme } from '@chakra-ui/core' + +const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` } + +const breakpoints = ['40em', '52em', '64em'] + +const theme = { + ...chakraTheme, + colors: { + ...chakraTheme.colors, + black: '#16161D', + }, + fonts, + breakpoints, + icons: { + ...chakraTheme.icons, + logo: { + path: ( + + + + + ), + viewBox: '0 0 3000 3163', + }, + }, +} + +export default theme diff --git a/examples/with-chakra-ui-typescript/tsconfig.json b/examples/with-chakra-ui-typescript/tsconfig.json new file mode 100644 index 0000000000000..c65399cb28e5d --- /dev/null +++ b/examples/with-chakra-ui-typescript/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "allowJs": true, + "alwaysStrict": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "jsx": "preserve", + "lib": ["dom", "es2017"], + "module": "esnext", + "moduleResolution": "node", + "noEmit": true, + "noFallthroughCasesInSwitch": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "target": "esnext" + }, + "exclude": ["node_modules"], + "include": ["**/*.ts", "**/*.tsx"] +} From 44562b39246d87c7e6e43c01ab385ae2746be0b3 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Thu, 27 Aug 2020 00:07:24 -0300 Subject: [PATCH 2/8] fixed nextjs version --- examples/with-chakra-ui-typescript/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json index 82965dfcdf0fc..8e0c10776320c 100644 --- a/examples/with-chakra-ui-typescript/package.json +++ b/examples/with-chakra-ui-typescript/package.json @@ -12,7 +12,7 @@ "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "emotion-theming": "^10.0.27", - "next": "latest", + "next": "^9.5.2", "react": "^16.13.1", "react-dom": "^16.13.1" }, From 0c8aee47314b80317f24dfc80e8883e0d900e46b Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Sat, 29 Aug 2020 23:35:01 -0300 Subject: [PATCH 3/8] Update examples/with-chakra-ui-typescript/package.json Co-authored-by: Joe Haddad --- examples/with-chakra-ui-typescript/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json index 8e0c10776320c..f580976946087 100644 --- a/examples/with-chakra-ui-typescript/package.json +++ b/examples/with-chakra-ui-typescript/package.json @@ -4,8 +4,7 @@ "scripts": { "dev": "next", "build": "next build", - "start": "next start", - "type-check": "tsc" + "start": "next start" }, "dependencies": { "@chakra-ui/core": "^0.8.0", From fbc04a46ad8c9334aaa9ba17cb7236554e3f4d68 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Sat, 29 Aug 2020 23:35:14 -0300 Subject: [PATCH 4/8] Update examples/with-chakra-ui-typescript/package.json Co-authored-by: Joe Haddad --- examples/with-chakra-ui-typescript/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json index f580976946087..1d9b0ee6e9d96 100644 --- a/examples/with-chakra-ui-typescript/package.json +++ b/examples/with-chakra-ui-typescript/package.json @@ -21,5 +21,5 @@ "@types/react-dom": "^16.9.8", "typescript": "4.0.2" }, - "license": "ISC" + "license": "MIT" } From 6e14c5fe62e6f63a9f7191ca856c9ec665cd58b4 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Sat, 29 Aug 2020 23:40:51 -0300 Subject: [PATCH 5/8] Update examples/with-chakra-ui-typescript/README.md --- examples/with-chakra-ui-typescript/README.md | 21 -------------------- 1 file changed, 21 deletions(-) diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md index 918ae65a0ce02..c72da5ced2da3 100644 --- a/examples/with-chakra-ui-typescript/README.md +++ b/examples/with-chakra-ui-typescript/README.md @@ -22,31 +22,10 @@ npx create-next-app --example with-chakra-ui-typescript with-chakra-ui-typescrip yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescript-app ``` -### Download manually - -Download the example: - -```bash -curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-chakra-ui-typescript -cd with-chakra-ui-typescript -``` - -Install it and run: - -```bash -npm install -npm run dev -# or -yarn -yarn dev -``` - Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ## Notes Next.js and chakra-ui has built-in TypeScript declarations, so we'll get autocompletion for their modules straight away. -A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts. - > All credits for [with-chakra-ui](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and [with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript) contributors. From 69d508be6d479cc45c43223a446cc1a5e645addd Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Sat, 29 Aug 2020 23:41:10 -0300 Subject: [PATCH 6/8] Update examples/with-chakra-ui-typescript/README.md From 141b242ab4f4a5d13fa059b55941c279212437b1 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Mon, 14 Sep 2020 11:41:43 -0300 Subject: [PATCH 7/8] Update to ChakraUi RC V1 --- .../with-chakra-ui-typescript/package.json | 6 ++---- .../src/components/CTA.tsx | 4 ++-- .../src/pages/_app.tsx | 11 ++++------ .../src/pages/index.tsx | 10 ++++----- .../with-chakra-ui-typescript/src/theme.tsx | 21 ------------------- 5 files changed, 13 insertions(+), 39 deletions(-) diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json index 8e0c10776320c..ae86adf25cf0c 100644 --- a/examples/with-chakra-ui-typescript/package.json +++ b/examples/with-chakra-ui-typescript/package.json @@ -8,10 +8,8 @@ "type-check": "tsc" }, "dependencies": { - "@chakra-ui/core": "^0.8.0", - "@emotion/core": "^10.0.35", - "@emotion/styled": "^10.0.27", - "emotion-theming": "^10.0.27", + "@chakra-ui/core": "^1.0.0-rc.3", + "@chakra-ui/icons": "^1.0.0-rc.3", "next": "^9.5.2", "react": "^16.13.1", "react-dom": "^16.13.1" diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx index 8dfb365a20a5d..d2e3dc10078fc 100644 --- a/examples/with-chakra-ui-typescript/src/components/CTA.tsx +++ b/examples/with-chakra-ui-typescript/src/components/CTA.tsx @@ -12,7 +12,7 @@ export const CTA = () => ( py={2} > - @@ -23,7 +23,7 @@ export const CTA = () => ( flexGrow={3} mx={2} > - diff --git a/examples/with-chakra-ui-typescript/src/pages/_app.tsx b/examples/with-chakra-ui-typescript/src/pages/_app.tsx index 344affee915d1..a7d811a3fd250 100644 --- a/examples/with-chakra-ui-typescript/src/pages/_app.tsx +++ b/examples/with-chakra-ui-typescript/src/pages/_app.tsx @@ -1,16 +1,13 @@ -import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core' +import { ChakraProvider } from '@chakra-ui/core' import theme from '../theme' import { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - - + + + ) } diff --git a/examples/with-chakra-ui-typescript/src/pages/index.tsx b/examples/with-chakra-ui-typescript/src/pages/index.tsx index 46a3d14d7ac60..704e8c6d59ea5 100644 --- a/examples/with-chakra-ui-typescript/src/pages/index.tsx +++ b/examples/with-chakra-ui-typescript/src/pages/index.tsx @@ -2,11 +2,11 @@ import { Link as ChakraLink, Text, Code, - Icon, List, ListIcon, ListItem, } from '@chakra-ui/core' +import { CheckCircleIcon, LinkIcon } from '@chakra-ui/icons' import { Hero } from '../components/Hero' import { Container } from '../components/Container' @@ -26,20 +26,20 @@ const Index = () => ( - + - Chakra UI + Chakra UI - + - Next.js + Next.js diff --git a/examples/with-chakra-ui-typescript/src/theme.tsx b/examples/with-chakra-ui-typescript/src/theme.tsx index 55da7272037a1..1f585c1e8517e 100644 --- a/examples/with-chakra-ui-typescript/src/theme.tsx +++ b/examples/with-chakra-ui-typescript/src/theme.tsx @@ -12,27 +12,6 @@ const theme = { }, fonts, breakpoints, - icons: { - ...chakraTheme.icons, - logo: { - path: ( - - - - - ), - viewBox: '0 0 3000 3163', - }, - }, } export default theme From 346270d03df76ab4e3246679152de61a2aeed6d7 Mon Sep 17 00:00:00 2001 From: tomasdisk Date: Mon, 21 Sep 2020 00:51:55 -0300 Subject: [PATCH 8/8] readme and next.js version updated --- examples/with-chakra-ui-typescript/README.md | 10 +++------- examples/with-chakra-ui-typescript/package.json | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md index c72da5ced2da3..59d8810b32cc7 100644 --- a/examples/with-chakra-ui-typescript/README.md +++ b/examples/with-chakra-ui-typescript/README.md @@ -2,7 +2,9 @@ This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with typescript. -We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props. +Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away. + +We are connecting the Next.js `_app.js` with `chakra-ui`'s Provider and theme so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props. ## Deploy your own @@ -23,9 +25,3 @@ yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescri ``` Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -## Notes - -Next.js and chakra-ui has built-in TypeScript declarations, so we'll get autocompletion for their modules straight away. - -> All credits for [with-chakra-ui](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and [with-typescript](https://github.com/vercel/next.js/tree/canary/examples/with-typescript) contributors. diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json index 9195d7d4e2719..72dcb5f66e307 100644 --- a/examples/with-chakra-ui-typescript/package.json +++ b/examples/with-chakra-ui-typescript/package.json @@ -9,7 +9,7 @@ "dependencies": { "@chakra-ui/core": "^1.0.0-rc.3", "@chakra-ui/icons": "^1.0.0-rc.3", - "next": "^9.5.2", + "next": "latest", "react": "^16.13.1", "react-dom": "^16.13.1" },