Building Dynamic Web Applications with Next.js/

...

/

Solution: Using UI Frameworks

Solution: Using UI Frameworks

Review the step-by-step solution to the exercise.

We'll cover the following...

Solution approach

We first develop the Chakra UI theme for our website. We create a new file named theme.js within the styles folder. Then, we set up two custom fonts for the website: Montserrat for headings and Inter for body text.

JavaScript (JSX)
import { extendTheme } from "@chakra-ui/react"
const theme = extendTheme({
  fonts: {
    heading: "Montserrat, sans-serif",
    body: "Inter, sans-serif",
  },
})
export default theme

We then implement a ...