nextjs使用jsx定义css

在Next.js中，可以使用JSX语法来定义CSS，这是通过使用CSS-in-JS库（如styled-components、emotion、CSS modules等）来实现的。这些库允许你在JSX中定义CSS样式，使CSS代码更加模块化和可维护。

例如，使用styled-components库，你可以这样定义CSS样式：

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
`;

function MyComponent() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

上述代码中，`Button`组件使用了styled-components库来定义CSS样式，样式代码被包含在模板字符串中，以反引号（``）开头和结尾。在`MyComponent`组件中，我们可以像使用普通的`<button>`元素一样使用`<Button>`组件，并且样式将自动应用到该组件。