Comments (13)
I ran against this today. The docs seem to be incorrect in this area. The following example from the docs, does not work.
handler.put('/user/:id', (req, res, next) => {
// https://nextjs.org/docs/routing/dynamic-routes
res.end(`User ${req.query.id} updated`);
});
As mentioned above, the id will be available as item in the array req.query.slug
.
A middleware example for how to fix that, would be welcome. But it would also require an update of the docs.
from next-connect.
It is now possible to use req.params
by setting attachParams to true
.
I also add a recipe for quickly migrating from Express that uses the mentioned optional catch-all route feature here
from next-connect.
Create this file instead api/[[...slug]].js
doc: https://nextjs.org/docs/api-routes/dynamic-api-routes#optional-catch-all-api-routes
from next-connect.
Create this file instead api/[[...slug]].js
req.query
will receive a Next.js query which is { slug: [] }
in this case since params
from trouter.find are never passed to req.
I've copied the source code locally and assigned assigned params
to req.params
here https://github.com/hoangvvo/next-connect/blob/master/lib/index.js#L60
@hoangvvo If this is fine I can send a PR. I'm not sure I want to mutate req.query which is assigned by Next.js but it's your call.
from next-connect.
Create this file instead api/[[...slug]].js
req.query
will receive a Next.js query which is{ slug: [] }
in this case sinceparams
from trouter.find are never passed to req.I've copied the source code locally and assigned assigned
params
toreq.params
here https://github.com/hoangvvo/next-connect/blob/master/lib/index.js#L60@hoangvvo If this is fine I can send a PR. I'm not sure I want to mutate req.query which is assigned by Next.js but it's your call.
I do not want next-connect
to do any url parsing tbh. However, perhaps it can live in the doc as a "recipe" as a middleware.
from next-connect.
url parsing is done internally by trouter anyways. Trouter.find returns both handlers and params but the params are ignored. I can't see a a way of doing it properly since the matched pattern is not passed to the handlers either so you can't create a middleware.
from next-connect.
For now, I'm using patch-package
to add the functionality that I need. It merges the path params, together with next's query
object.
For those interested, use patch-package
, and add the following diff to /patches/next-connect+0.9.1.patch
.
diff --git a/node_modules/next-connect/lib/index.js b/node_modules/next-connect/lib/index.js
index 9c5aac6..a4beb92 100755
--- a/node_modules/next-connect/lib/index.js
+++ b/node_modules/next-connect/lib/index.js
@@ -57,10 +57,11 @@ module.exports = ({
nc.handle = function handle(req, res, done) {
const idx = req.url.indexOf("?");
const pathname = idx !== -1 ? req.url.substring(0, idx) : req.url;
- const { handlers } = this.find(
+ const { handlers, params } = this.find(
req.method,
this.baseUrl ? pathname.substring(this.baseUrl.length) : pathname
);
+ req.query = Object.assign({}, req.query, params);
let i = 0;
const len = handlers.length;
const next = (err) => {
from next-connect.
i created file [[...slug]] in api folder
and i try to post from postman by this url : localhost:3000/api/users
its give error's
if i remove base ("/users",
its give me not found as result at postman
const app = require("next-connect")();
const helmet = require("helmet");
const cors = require("cors");
app.use(helmet());
app.use(cors());
app.post("/users", (req, res, next) => {
res.end("User created");
});
export default app;
Please tell me if it can be fixed soon i wont move to express as spare backend
from next-connect.
maybe its will help someone if it helped you please give me Like to know thats help you 👍
create dynamic file in api folder [[...slug]]
for example and add /api to the pattern
will be for example /api/users maybe the owner can skip it in the Code 🍡
function onError(err, req, res, next) {
res.status(500).end(err.toString());
}
function onNoMatch(req, res) {
res.status(404).end("Page Not Found");
}
import lol from "next-connect";
const helmet = require("helmet");
const cors = require("cors");
const app = lol({ onError, onNoMatch });
app.use(helmet());
app.use(cors());
app.use("/api/users", (req, res, next) => {
console.log(req.url);
res.end("User created");
});
export default app;
from next-connect.
I ran against this today. The docs seem to be incorrect in this area. The following example from the docs, does not work.
handler.put('/user/:id', (req, res, next) => { // https://nextjs.org/docs/routing/dynamic-routes res.end(`User ${req.query.id} updated`); });As mentioned above, the id will be available as item in the array
req.query.slug
.A middleware example for how to fix that, would be welcome. But it would also require an update of the docs.
[[...slug]].js
app.use("/api/users/:id", (req, res) => {
res.end(user ${req.query.slug[1]} created :D
);
});
from next-connect.
setting attachParams to
true
this does not work for me
from next-connect.
setting attachParams to
true
this does not work for me
Please create a new issue on this. Thanks!
from next-connect.
import nc from "next-connect";
import onError from "../../../middlewares/errors";
import { getStreaming, postStreaming } from "../../../controller/StreamingController";
// Initiate next-connect with error middleware
const handler = nc ({ onError });
// Define routes using the handler's methods
handler.get(getStreaming);
handler.post(postStreaming);
export default handler;
this code got error - - error pages/api/Streaming/streaming.tsx (6:21) @ eval
- error Error [TypeError]: next_connect__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
from next-connect.
Related Issues (20)
- how to use in next13 ? HOT 2
- Is this project alive? HOT 2
- Migration guide from 0.13.0? HOT 3
- OPTIONS
- Nextjs routes HOT 2
- Express middlewares in route handlers (support passport in app router)
- How to use next-connect with nextjs 13 App router and passport? HOT 1
- What is "RequestContext" and how it should be used when using NextJs 13? HOT 2
- Next connect with multer HOT 1
- Next Js App router catch-all error handler HOT 4
- Defining custom properties/types per handler in v1? HOT 1
- Incorrect issue report
- Not able to use multer as middleware
- Prisma Ensure you return a `Response` or a `NextResponse` in all branches of your handler
- nextjs14 with next-connect not working HOT 1
- Next.js 14 Ensure you return a `Response` or a `NextResponse` in all branches of your handler. HOT 5
- App/Route issue "Promise<unknown>" HOT 4
- fetch remote image with cors
- How to implement passport with next-connect in Next 14?
- Add Next.js 14 Example with Implementation of next-connect HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-connect.