Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add nextjs page with link to next starter app and couple FAQs #13444

Merged
merged 1 commit into from
May 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/guides.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ integrating Mongoose with external tools and frameworks.
* [Promises](promises.html)
* [Lodash](lodash.html)
* [AWS Lambda](lambda.html)
* [Next.js](nextjs.html)
* [Browser Library](browser.html)
* [GeoJSON](geojson.html)
* [Transactions](transactions.html)
Expand Down
38 changes: 38 additions & 0 deletions docs/nextjs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Using Mongoose With [Next.js](https://nextjs.org/)

Next.js is a popular framework for building full stack applications with React.
Mongoose works out of the box with Next.js.
If you're looking to get started, please use [Next.js' official Mongoose sample app](https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose).
Furthermore, if you are using Next.js with [Vercel Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions), please review [Mongoose's AWS Lambda docs](https://vercel.com/docs/concepts/functions/serverless-functions).

There are a few common issues when working with Next.js that you should be aware of.

### TypeError: Cannot read properties of undefined (reading 'prototype')

You can fix this issue by adding the following to your `next.config.js`:

```
const nextConfig = {
experimental: {
esmExternals: "loose", // <-- add this
serverComponentsExternalPackages: ["mongoose"] // <-- and this
},
// and the following to enable top-level await support for Webpack
webpack: (config) => {
config.experiments = {
topLevelAwait: true
};
return config;
},
}
```

This issue is caused by [this change in MongoDB's bson parser](https://github.com/mongodb/js-bson/pull/564/files).
MongoDB's bson parser uses top-level await and dynamic import in ESM mode to avoid some Webpack bundling issues.
And Next.js forces ESM mode.

### Next.js Edge Runtime

Mongoose does **not** currently support [Next.js Edge Runtime](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime).
While you can import Mongoose in Edge Runtime, you'll get [Mongoose's browser library](browser.html).
There is no way for Mongoose to connect to MongoDB in Edge Runtime, because [Edge Runtime currently doesn't support Node.js `net` API](https://edge-runtime.vercel.app/features/available-apis#unsupported-apis), which is what the MongoDB Node Driver uses to connect to MongoDB.
1 change: 1 addition & 0 deletions docs/source/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ docs['docs/transactions.md'] = { guide: true, title: 'Transactions', acquit: tru
docs['docs/deprecations.md'] = { guide: true, title: 'Deprecation Warnings', markdown: true };
docs['docs/further_reading.md'] = { title: 'Further Reading', markdown: true };
docs['docs/jest.md'] = { title: 'Testing Mongoose with Jest', markdown: true };
docs['docs/nextjs.md'] = { title: 'Using Mongoose With Next.js', markdown: true };
docs['docs/faq.md'] = { guide: true, title: 'FAQ', markdown: true };
docs['docs/typescript.md'] = { guide: true, title: 'Using TypeScript with Mongoose', markdown: true };
docs['docs/compatibility.md'] = {
Expand Down