html - 如何在服务器端渲染中将样式应用于 Next.js 中的 HTML？

Question

访问Next.js并注意网络选项卡中的页面请求。预览不仅显示 HTML，而且显示完全预先设置样式的页面。

当我们使用它们时Styled-Components，Material-UI它们已经暴露ServerStyleSheet了用于为 HTML 中的第一次渲染提供所需的样式。

import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/core/styles'

我们如何在使用react-bootstrap或自定义 CSS时获得相同的输出test.css？

Answer 1

你关心它是 test.css 还是 React 引导程序 - 为什么不直接内联所有关键样式表？

可能值得尝试他们的实验功能

1. 添加experimental: { optimizeCss: true }到 next.config.js
2. 安装 critters@0.0.7 作为依赖项

通过如何在 NextJS 项目的 head 标签中内联 CSS？

Answer 2

使用顺风 css

https://tailwindcss.com/

我们可以简单地使用类，它使您设计的一切都变得超级简单

Answer 3

在 _app 文件上添加你的样式文件，你可以在 nextjs 的 pages 目录中创建这个文件

import { AppProps } from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../your_style.css";

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}


export default App;

对于 react-bootstrap ，您需要添加npm i react-bootstrap bootstrap

Answer 4

Nextjs 允许您显示 SSG/SSR 页面，并且禁用 javascript 的用户仍然可以看到您的应用程序，但是如果您使用 react-bootstrap 组件来构建布局，布局将会很混乱。

要在 SSR 上使用 react-bootstrap：

1. 安装 ：

   npm i react-bootstrap bootstrap
   

2. 在您的导入引导样式_app.js：

   import 'bootstrap/dist/css/bootstrap.min.css';
   

3. 然后你可以react-bootstrap components像在 reactjs 中一样使用你的：

import {Container, Row, Col} from 'react-bootstrap';
        
const Layout = () => (
  <>
    <Container fluid>
      <Row>
        <Col>
          <p>Running on Next.js at SSR</p>
        </Col>
      </Row>
    </Container>
  </>
);
        
export default Layout;