nexp-level-002 01 Next.js + NextUI 完美组合,引入CSS组件库
React + NextUI 安装
安装
在 React 项目目录中,通过运行以下任一命令安装 NextUI:
yarn add @nextui-org/react
# or
npm i @nextui-org/react
设置
为了让 NextUI 正常工作,您需要NextUIProvider
在应用程序的根目录下设置。
React
转到应用程序的根目录并执行以下操作:
import * as React from 'react';
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
function App({ Component }) {
// 2. Use at the root of your app
return (
<NextUIProvider>
<Component />
</NextUIProvider>
);
}
Next.js
- 转到
pages/_app.js
或pages/_app.tsx
(如果它不存在则创建它)并添加:
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }) {
return (
// 2. Use at the root of your app
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
- 转到
pages/_document.js
或pages/_document.tsx
(如果不存在则创建)并添加:
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [<>{initialProps.styles}</>]
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
使用 NextUI 组件
安装 NextUI 后,您可以使用以下任何组件。NextUI 使用 tree-shaking,因此在构建过程中未使用的模块不会包含在包中,并且每个组件都单独导出。
import { Button } from '@nextui-org/react';
const Component = () => <Button>Click me</Button>;
单个组件导入
import Button from '@nextui-org/react/button';
const Component = () => <Button>Click me</Button>;
NextUIProvider 道具
属性 | 类型 | 可接受的值 | 描述 | 默认 |
---|---|---|---|---|
主题 | NextUIThemes |
主题对象 | 可选的自定义主题,默认 NextUI 应用light 主题 |
- |
禁用基线 | boolean |
true/false |
NextUI 自动包含<CssBaseline/> |
false |
打字稿类型
主题对象
有关更多信息,您可以查看Stitches 主题文档
{
"type": "light", // light / dark
"className": "", // optional
"theme": {
"colors": {},
"space": {},
"fontSizes": {},
"fonts": {},
"fontWeights": {},
"lineHeights": {},
"letterSpacings": {},
"sizes": {},
"borderWidths": {},
"borderStyles": {},
"radii": {},
"shadows": {},
"zIndices": {},
"transitions": {}
}
}
NextUI + Next.js
服务器渲染
的所有组件@nextui-org/react
都与Server Render兼容。实际上,您现在看到的页面是由服务器渲染的。
服务器端渲染 (SSR) 是在服务器上渲染网页并将其传递给浏览器(客户端)的过程,而不是在浏览器中渲染它们。SSR 向客户端发送一个完全渲染的页面;客户端的 JavaScript 包接管并启用 SPA 框架运行,在 React.js 中使用服务器端渲染的最佳选择是使用Next.js.
如果您担心通过实现服务器端呈现而失去单页应用程序的优势,您可以使用该hybrid render
应用程序。请阅读Next.js 团队的帖子了解更多。
此外,对于服务器端渲染和 Web 应用程序,我们强烈建议您阅读这篇著名的帖子 丰富网络应用程序的 7 个原则来自吉列尔莫·劳赫。
Next.js
在Next.js框架,需要自定义文件_document.js
,请参考Next.js 文件在这里 创建文件_document.js
。
然后我们将以下代码添加到文件中:
|
|
_document.js
这是您的文件应该是什么样子的示例:_文档.jsx.
自定义服务器
在自定义服务器中,还可以从函数中获取样式集,CssBaseline.flush
如下所示。
|
|
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nexp/level002/nexp-level-002-01-Next.js-+-NextUI-%E5%AE%8C%E7%BE%8E%E7%BB%84%E5%90%88%E5%BC%95%E5%85%A5CSS%E7%BB%84%E4%BB%B6%E5%BA%93/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com