如何将 Next.js 应用程序发布为 npm 包？

Question

我有一个基于 Next.js 构建的网络应用程序。我想将此应用程序发布为 npm 包，以便可以在其他项目中使用。我尝试使用谷歌查找资源和帮助，但没有找到任何有用的信息。

是否可以？如果是的话我怎样才能实现这个目标？

谢谢

Answer 1

我也有几乎同样的需求。我使用 next js 页面创建了一个博客，我想为 2 个 next js 项目共享这些页面。

到目前为止，我已经能够通过这种方式使用 vite / rollup 构建器来实现它（简化）：

NPM包：

// node_modules/@namespace/next-blog/pages/ssr/BlogArticle.tsx
export SSRBlogArticle = getServerSideProps(...) {...}
export BlogArticlePage: NextPage = (SSRProps) => <Blog {..props} />

在我的下一个主要 js 应用程序中使用 Package

// ./src/pages/blog.tsx
import { SSRBlogArticle, BlogArticlePage } from '@namespace/next-blog'

export getServerSideProps = SSRBlogArticle

const BlogPage: NextPageWithLayout = BlogArticlePage

// some layout
BlogPage.getLayout = (page) => <Layout>{page}</Layout>

export default BlogPage

process.ENV问题在于和的用法useRouter。next/link好像不行...

这是我的 vite 配置文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import gql from 'vite-plugin-simple-gql'
import tsconfigPaths from 'vite-tsconfig-paths'
import * as path from 'path'
import pkg from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
    gql(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'NextBlog',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: [
        ...Object.keys(pkg.dependencies),
        ...Object.keys(pkg.peerDependencies),
      ],
    },
  },
})

所以我想在原来的问题上添加更多问题：

• 我们可以从 npm 包中读取 env 文件吗？process.ENV 读取主应用程序环境文件？
• 为什么 useRouter 无法正常工作？
• 我做对了吗？这是好的做法吗？

感谢您的帮助 ：）

编辑

进程.env

• 我设法找出为什么所有内容都process.env从构建中删除，vitejs删除它们并替换为{}. 解决方案是：

define: {
  // keep process.env* vars in code bundle
  'process.env': 'process.env',
},

使用路由器

仍然无法理解它的问题......

以下是单击下一步/链接时主应用程序中 useRouter 出现的一个示例错误：

Uncaught TypeError: Cannot read properties of null (reading 'push')
    at linkClicked (index.es.js?4bcb:3731:1)
    at onClick (index.es.js?4bcb:3830:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?ac89:4288:1)
    at executeDispatch (react-dom.development.js?ac89:9038:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js?ac89:9070:1)
    at processDispatchQueue (react-dom.development.js?ac89:9083:1)
    at dispatchEventsForPlugins (react-dom.development.js?ac89:9094:1)
    at eval (react-dom.development.js?ac89:9285:1)
    at batchedUpdates$1 (react-dom.development.js?ac89:26096:1)
    at batchedUpdates (react-dom.development.js?ac89:3988:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js?ac89:9284:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js?ac89:6462:1)
    at dispatchEvent (react-dom.development.js?ac89:6454:1)
    at dispatchDiscreteEvent (react-dom.development.js?ac89:6427:1)

目前，我正在考虑的唯一解决方法是使用本机 a 标签......

编辑2

我终于找到了解决方案：为了使我的包内的路由器对象不为空，我必须将其从主 nextjs 应用程序传递到页面的包。在包装内部，我必须用以下内容包装我的组件RouterContext：

// package next page
import { RouterContext } from 'next/dist/shared/lib/router-context' // next 12

const MyPackagePage = (props) => {
  <RouterContext.Provider value={props.router}>
    <MyComponents ... />
  </RouterContext.Provider>
}

// main next app
const Page = (props) => {
  const router = useRouter()
  return MyPackagePage({ router, ...props })
}

现在工作正常。集成不太容易，样板代码较多，但至少可以在 npm 包中导出下一页。