How can I use media queries in Next.js?

How can I use media queries in Next.js?

You can use media queries in Next.js by adding them to your CSS files or using styled-components. Would you like an example?

Yes, please provide an example of using media queries.

Sure! In your CSS file, you can write:

@media (max-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

This will change the background color of the container when the screen width is 600px or less.

Can I use media queries with styled-components?

Absolutely! With styled-components, you can use media queries like this:

const Container = styled.div`
  background-color: white;

  @media (max-width: 600px) {
    background-color: lightblue;
  }
`;

This allows you to keep your styles scoped to the component.