Nextjs

1、请求数据 topic.js export default function Topic({ result }) { const data = result && result.data || []; return ( <ul className="list"> {data.map(item => ( <li key={item.id}>{item.title}</li> ))} </ul> ); } export async function getServerSideProps(context) { …

定制错误页 import Error from 'next/error'; export default function Index({ result }) { const { success, data } = result; if (!success) { return <Error statusCode={500} title="出错了" />; } return ( <> <style jsx> {` .list { margin: 30px; } `} </style> <ul …

安装 cross-env $ npm install cross-env --save-dev 使用cross-env注入环境变量 package.json { scripts: { "dev": "next dev", "build": "next build", "start": "next start", "build:test": "cross-env BUILD_TARGET=test next build", "build:prod": …

安装 $ npm install wangeditor-for-react React中使用 import { useState } from "react"; import ReactWEditor from "wangeditor-for-react"; function Editor() { const [value, setValue] = useState(""); return <ReactWEditor defaultValue={value} onChange={setValue} />; } export …

安装 $ npm install react-quill --save // or $ yarn add react-quill React中使用 import React, { useState } from "react"; import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; function MyComponent() { const [value, setValue] = useState(""); return …

需求 antd 目前的默认文案是英文，我们需要使用中文。 nextjs自定义 App 创建./pages/_app.js function MyApp({ Component, pageProps }) { return ( <Component {...pageProps} /> ); } export default MyApp 安装antd $ npm install antd --save # or $ yarn add antd 配置 import { ConfigProvider } from 'antd'; import zhCN from …