使用 Next.js 搭建 Monorepo 组件库文档

npx create-next-app@latest --ts

packages:
  - 'packages/*'

├── packages
│   ├── user-select
│   ├── login
│   ├── utils

{
  "name": "@mastack/login",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

pnpm add typescript -r  -D

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "jsx": "react",
    "outDir": "dist",
    "target": "ES2020",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "declaration": true,
    "forceConsistentCasingInFileNames": true
  }
}

pnpm i @mastack/utils --filter @mastack/login

pnpm install antd -w

import React, { useState } from 'react'
import { Button, Modal } from 'antd'

interface Props {
  className: string;
}

export default function Login({ className }: Props) {
  const [open, setopen] = useState(false)
  return (
    <>
      <Button onClick={() => setopen(true)} className={className}>
        登录
      </Button>
      <Modal title="登录" open={open} onCancel={() => setopen(false)} onOk={() => setopen(false)}>
        <p>登录弹窗</p>
      </Modal>
    </>
  )
}

"scripts": {
    "build": "tsc"
  }

pnpm add @next/mdx @mdx-js/loader @mdx-js/react -w

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  reactStrictMode: true,
  swcMinify: true,
})

export async function getStaticPaths(context: GetStaticPathsContext) {
  return {
    paths: [{ params: { slug: ['login'] } }, { params: { slug: ['user-selecter'] } }],
    fallback: false, // SSG 模式
  }
}

export async function getStaticProps({ params }: GetStaticPropsContext<{ slug: string[] }>) {
  const slug = params?.slug.join('/')

  return {
    props: {
      slug,
    }, // 传递给组件的props
  }
}

import React from 'react'
import { GetStaticPathsContext, InferGetServerSidePropsType, GetStaticPropsContext } from 'next'
import dynamic from 'next/dynamic'

type Props = InferGetServerSidePropsType<typeof getStaticProps>

export default function Page({ slug }: Props) {
  const Content = dynamic(() => import(`../packages/${slug}/docs/index.mdx`), {
    ssr: false,
  })

  return (
    <div>
      <Content />
    </div>
  )
}

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@mastack/login": ["packages/login/src"],
      "@mastack/user-select": ["packages/user-select/src"]
    }
  }
}

import dynamic from 'next/dynamic'
import { MDXProvider } from '@mdx-js/react'

const DemoBlock = ({ children }: any) => {
  console.log(children)
  return null
}

const components = {
  DemoBlock,
}

export default function Page({ slug }: Props) {
  const Content = dynamic(() => import(`packages/${slug}/docs/index.mdx`), {
    ssr: false,
  })

  return (
    <div>
      <MDXProvider components={components}>
        <Content />
      MDXProvider>
    div>
  )
}

import React, { useState } from 'react'

const DemoBlock = ({ children }: any) => {
  const [visible, setVisible] = useState(false)

  return (
    <div className="demo-block">
      {children.map((child: any) => {
        if (child.type === 'pre') {
          return (
            <div key={child.key}>
              <div className="demo-block-button" onClick={() => setVisible(!visible)}>
                {!visible ? '显示代码' : '收起代码'}
              div>
              {visible && child}
            div>
          )
        }
        return child
      })}
    div>
  )
}

pnpm install -Dw tailwindcss postcss autoprefixer @tailwindcss/typography
pnpx tailwindcss init -p

@tailwind base;
@tailwind components;
@tailwind utilities;

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

/** @type {import("tailwindcss").Config } */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,md,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './packages/**/*.{md,mdx}',
  ],
  darkMode: 'class',
  plugins: [require('@tailwindcss/typography')],
}

pnpm install remark-gfm remark-footnotes remark-math rehype-katex rehype-slug rehype-autolink-headings rehype-prism-plus -w

// Remark packages
import remarkGfm from 'remark-gfm'
import remarkFootnotes from 'remark-footnotes'
import remarkMath from 'remark-math'
// Rehype packages
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrismPlus from 'rehype-prism-plus'

import nextMDX from '@next/mdx'

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath, remarkGfm, [remarkFootnotes, { inlineNotes: true }]],
    rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, [rehypePrismPlus, { ignoreMissing: true }]],
  },
})

export default withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  reactStrictMode: true,
  swcMinify: true,
})

pnpm add -Dw @changesets/cli

pnpm changeset init

"compile": "pnpm --filter=@mastack/* run build",
"pub": "pnpm compile && pnpm --recursive --registry https://registry.npmjs.org/ publish --access public"

npx vercel