DEV Community

Cover image for Creating a Project with Nest.js + Next.js

Creating a Project with Nest.js + Next.js

Alexey Yakovlev on January 05, 2022

This is the first part in a series of articles about combining nest.js and NEXT.js. Today you will learn how to setup a project and choose a valid ...
Read full post
Collapse
 
jeserkin profile image
Eugene Serkin • • Edited

I encountered one big issue in end result. When I refreshed page for certain blog post it threw error.
As far as I can tell it was unable to resolve [id] to specific value in url.

error

Collapse
 
mouryasumit0 profile image
Sumit Mourya •

Facing same issue, In Next js v11 it is working fine but this issue is faced in v12 of NextJs. Have you fixed this or have any more idea about it ?

Collapse
 
yakovlev_alexey profile image
Alexey Yakovlev •

After long wait the fix is out - it was tracked in this issue github.com/kyle-mccarthy/nest-next...

Not sure if package owner updated the version yet

Collapse
 
liohau profile image
Julien •

Is there a way to combine next + nest with the new next v13 app/ folder ?

Collapse
 
yakovlev_alexey profile image
Alexey Yakovlev • • Edited

I collected a few of my observations in this GH issue - github.com/kyle-mccarthy/nest-next.... If you have any issues using it I think you should add a comment to the thread there

Collapse
 
litehacker profile image
Giorgi Gvimradze • • Edited

is this error ERROR [ExceptionHandler] Cannot read properties of undefined (reading 'nextConfig') somehow related to the NEXT version? I got this error going from the beginning until "SSR data preparation", where it expected to work? While NextJS is rendering fine, nest doesn't want to start.

Collapse
 
mavstronaut profile image
Maverick •

I saw this same issue as well, is there a solution? I tried disabling the eslint and have seen an error on the package.json about failing to write because they would overwrite, this went away after running build:nest, although the package.json still shows 9 errors.
Attempting to run build:next exposed another issue with fetch.ts not being allowed to have comments in children (though there are no comments in fetch.ts)

Collapse
 
vedantkirve123 profile image
vedant •

getting the same error did you find any solution?

Collapse
 
sean88 profile image
김도균 (Sean) • • Edited

Finally I made a solution patch. Keep this in /patches/nest-next@10.1.0.patch file. patches should be located out of src. After then, run install command of your package manager(npm i, pnpm i, ..)
(10.1.0 means the last version of nest-next, which i used here, was 10.1.0)

diff --git a/dist/render.module.js b/dist/render.module.js
index aabdf486d1f24b704c5797c079505916879a9bc4..4cdd6ad8caa0cba456107f620b69de49b18dc452 100644
--- a/dist/render.module.js
+++ b/dist/render.module.js
@@ -31,7 +31,7 @@ let RenderModule = RenderModule_1 = class RenderModule {
                 yield next.prepare();
             }
             const nextConfig = next.nextConfig;
-            const nextServer = next.server;
+            const nextServer = next.renderServer.server;
             const basePath = nextConfig
                 ? nextConfig.basePath
                 : nextServer.nextConfig.basePath;
Enter fullscreen mode Exit fullscreen mode

What this patch do is so simple. Instead of using next.server, we should use next.renderServer.server. I think class hierarchy was changed as Next version goes up to v13.
I highly recommend that you make your own patch using the functionality of package manager(npm, yarn. pnpm). It's so easy.

Collapse
 
iamjimparsons profile image
iamjimparsons •

What if I wanted to add in another react application say like an inventory which is just needed for internal purposes?

Collapse
 
bluesky49 profile image
bluesky49 • • Edited

@yakovlev_alexey
I tried to use global.css in the app.tsx but it is not working.
do you have any solution?