使用Next JS和Turborepo创建公共共享页面

kfgdxczn  于 2023-01-30  发布在  其他
关注(0)|答案(1)|浏览(194)

我有一个用turborepo创建的monorepo,它包含两个next.js应用程序,结构如下

base
|---apps
|   |---editor
|   |    |---pages
|   |        |---index.js //this file is different in both apps
|   |        |---anotherPage.js //this is the same file in both apps
|   |   
|   |---etsy
|        |---pages
|            |---index.js //this file is different in both apps
|            |---anotherPage.js //this is the same file in both apps
|
|---package

在Next JS里面有自动路由,所以我去url/otherPage的时候,自动重定向到otherPage.js页面,我有一堆应用之间的公共页面,还有一堆公共的API在pages/api目录下,我怎么做一个系统,把那些共享的页面放在packages目录下,同时还保留自动路由和API路由。

yeotifhr

yeotifhr1#

实现这一点的一种方法是在monorepo中为共享页面和API创建一个单独的包,然后将它们导入到应用的页面和API目录中。这样,您可以保留自动路由和API路由,同时将共享代码保存在一个单独的包中,以便在不同的应用之间轻松共享和管理。
为此,您可以将共享页面和API移动到软件包目录中的新目录,然后创建一个新的package.json文件并运行npm init来创建软件包。设置好共享软件包后,您可以将共享页面和API导入应用的页面和API目录中,并正常使用它们。
你也可以使用symlink或者npm link在软件包和应用程序之间创建一个链接,这样软件包上所做的更改就会真实的反映到应用程序上。
请记住,这只是解决此问题的一种方法,可能还有其他方法可以达到相同的效果,具体的实现细节将取决于您的项目需求。

相关问题