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

Question

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

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

谢谢

Answer 1

我也有几乎同样的需求。我使用下一个 js 页面创建了一个博客，我想为下两个 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读取主应用程序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 包中导出下一页。

Answer 2

我遇到了类似的问题。我试图构建一个开源身份验证平台，但不确定如何最好地分发它以便其他人可以使用它。所以我实际上开发了自己的解决方案。它被称为SherpaJS。它受到 NextJS 的启发，允许您构建模块化和无服务器系统，甚至将它们部署到 Vercel。

该项目确实很早期（可能存在一些错误）并且文档不是最好的，但我正在努力发展它。如果你有机会去看看。我知道现在您可能已经解决了这个问题，但如果您有任何问题或想法，请告诉我。如果有任何反馈，我将不胜感激。

Answer 3

您可以使用

semantic-release

npm 包。

在您的

package.json

文件中，您应该添加以下配置

  "release": {
    "branches": [
      "master"
    ],
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      [
        "@semantic-release/changelog",
        {
          "changelogFile": "CHANGELOG.md"
        }
      ],
      "@semantic-release/npm",
      "@semantic-release/github",
      [
        "@semantic-release/git",
        {
          "assets": [
            "CHANGELOG.md",
            "package.json",
            "package-lock.json"
          ]
        }
      ]
    ]
  }

您的项目应该是公开的，并且应该在

"private": false

中包含

package.json

。