Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Recipe] Next.js components & Chakra

See original GitHub issue

We should provide a proper recipe of how to integrate Chakras Link with next/link, including the edge case of using a Link within a MenuItem.

Resources:

https://github.com/ljosberinn/personal-react-boilerplate/blob/master/src/client/components/LanguageSwitch.tsx#L79
https://github.com/ljosberinn/personal-react-boilerplate/blob/master/src/client/components/ExternalLink.tsx (forwardRef)
https://github.com/ljosberinn/personal-react-boilerplate/blob/master/src/client/components/InternalLink.tsx (previous version without i18n integration, also currently misses forwardRef)

Since Next.js v10, next/image is a thing and this should be documented as well.

Issue Analytics

State:
Created 3 years ago
Reactions:30
Comments:17 (7 by maintainers)

Top GitHub Comments

41reactions

asmocklercommented, Jan 2, 2021

For anyone like me winding up here trying to figure out how to get next links to work with chakra menus, this worked for me:

<MenuList>
  <NextLink href="/settings" passHref>
    <MenuItem as={Link}>Settings</MenuItem>
  </NextLink>
</MenuList>

16reactions

ljosberinncommented, Nov 19, 2020

@oahmaro good news - we have plans to support this in the future 😃

Top Results From Across the Web

Getting Started with Next.js - Chakra UI

A guide for installing Chakra UI with Nextjs projects. ... pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the...

How to Use Chakra UI with Next.js and React - freeCodeCamp

Chakra UI is a component library for React that makes it easy to build the UI of an app or website. Their goal...

Add Chakra Ui To Nextjs - Composable Web

A code recipe to install and configure Chakra-UI for use with NextJS as CSS-In-JS solution.

How to Use Chakra UI with Next.js and React App - Morioh

We'll walk through installing chakra UI in a new Next.js app, configuring the application with the Chakra ThemeProvider, and importing components to use ......

How to use ChakraUI with NextJS? - Medium

It's never easy to design a user interface, but Chakra UI is a beautiful UI package for getting your Next.js application up and...