archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-chakra-ui-typescript
History
Oscar Busk 25df53d19f
next-env.d.ts note in templates (#27983) 
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.

![image](https://user-images.githubusercontent.com/13413409/129115266-80e00bf3-78aa-40be-bd0f-a18aaa448a68.png)

So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)

Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)

> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
2021-08-12 20:36:53 +00:00
..
src Update Chakra UI examples to latest versions. (#23585) 2021-04-17 21:22:30 +00:00
.gitignore Add with-chakra-ui-typescript example (#16561) 2020-09-21 04:54:15 +00:00
next-env.d.ts next-env.d.ts note in templates (#27983) 2021-08-12 20:36:53 +00:00
package.json Clean up examples package.json (#27121) 2021-07-12 19:58:03 +00:00
README.md docs: add 'Open in StackBlitz' buttons to various examples (#25853) 2021-06-08 20:45:02 +00:00
tsconfig.json Update tsconfig of example to be consistent with default output of next.js (#25581) 2021-06-03 22:31:14 +00:00

README.md

Example app with chakra-ui and Typescript

This example features how to use chakra-ui as the component library within a Next.js app with typescript.

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.

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

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

Deploy it to the cloud with Vercel (Documentation).

Notes

Chakra has supported Gradients and RTL in v1.1. To utilize RTL, add RTL direction and swap.

If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.ts.