47ng/chakra-next

Chakra-UI v1 🤝 Next.js v10

Closed this issue · 1 comments

franky47 commented

Meta-issue to list the things to do to integrate the new features & evolutions of both Chakra-UI & Next.js

Chakra-UI v1

  • Simplify _app.tsx: use the new ChakraProvider with integrated CSS reset & global styles
  • Check out the list of codemods to apply

Next.js v10

  • Integrate the new Image component
  • Mark support for as in Links as optional
franky47 commented

For the Image component: use Chakra v1's factory function to wrap the Next.js image logic component.

Issues encountered:

  • The <Image> component is not a simple drop-in for the <img> tag, it creates a more complex structure (two additional divs), which causes layout issues. Many issues refer to this on the Next.js repo, will see how it evolves.
  • Also, using the <Image> component outside of a Next.js context (eg: during testing) is tricky, as it relies on the configuration in next.config.js.

Some examples of people using the Image component in a Chakra layout: