Next.js Discord

Discord Forum

req.method returning undefined

Unanswered
Chinese perch posted this in #help-forum
Open in Discord
Chinese perchOP
export default function Home() {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('/api/get_data', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                setData(data);
                console.log(data)
            });
    }, []);

import type { NextApiRequest, NextApiResponse } from 'next'
const mysql = require('mysql2');

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "anshu@9002",
    database: "vibgyor"
});
console.log('eeeeee')
export default function handler(req: NextApiRequest, res: NextApiResponse) {
    console.log(req.method)
    if (req.method === 'POST') {
        db.connect(function (err: any) {
            if (err) throw err;
            db.query('SELECT * FROM student_list', function (err:any, result:any) {
                if (err) throw err;
                console.log("Result: " + result);
            });
        });
    } else {
        // Handle any other HTTP method
    }
}

req.method returns undefined

45 Replies

Giant Angora
Is this inside the /api directory under /pages?
Chinese perchOP
@Giant Angora Is this inside the `/api` directory under `/pages`?
Chinese perchOP
posted above ^
Giant Angora
Isn't it src/pages/api? Or can you just create an api directory under src directly?
no?
Giant Angora
no
Chinese perchOP
then what is it?
pages?
Giant Angora
src/pages/api 😄
Chinese perchOP
butt isnt pages the old format?
Giant Angora
ah you are right, sorry
Chinese perchOP
is this related?
anyone can explain what exactly it is? And in next 14, there is also something called 'use server' so maybe that? Idk. Could be some simple issue...
Giant panda
That's not how route handlers are declare in the app router
You need to use the new named signatures
Also it makes no sense to send a POST request to GET data
Chinese perchOP
Yeah mb
I changed that already
Giant panda
In addition to client-side fetching being obsolete in the app router
@Giant panda That's not how route handlers are declare in the app router
Chinese perchOP
import type { NextApiRequest, NextApiResponse } from 'next'
const mysql = require('mysql2');

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "anshu@9002",
    database: "vibgyor"
});
console.log('eeeeee')
export default function get_data(req: NextApiRequest, res: NextApiResponse) {
    console.log(req)
    if (req.method === 'GET') {
        db.connect(function (err: any) {
            if (err) throw err;
            db.query('SELECT * FROM student_list', function (err:any, result:any) {
                if (err) throw err;
                console.log("Result: " + result);
            });
        });
    } else {
        // Handle any other HTTP method
    }
}

hmm?
Giant panda
That's still not how route handlers should be defined in the app router.
Consult the docs to see how to do it properly
Especially in terms of naming and file convention
nothing else?
New Zealand Heading Dog
So like this:
src
- api
- get_data
- route.ts

Inside route.ts:
export default function POST(req: NextApoRequest, res: NextApiResponse):
 // YOUR DATABASE LOGIC
@Chinese perch only route.ts?
New Zealand Heading Dog
You can do route.js but I see you are using TypeScript, that's why I suggested route.ts.
@New Zealand Heading Dog You can do route.js but I see you are using TypeScript, that's why I suggested route.ts.
Chinese perchOP
no like I mean, the docs have named it hello.ts
so
@Chinese perch no like I mean, the docs have named it hello.ts
New Zealand Heading Dog
That's the old pages router. You are using the app router.
Chinese perchOP
ohh right
Thanks!
@New Zealand Heading Dog So like this: src - api - get_data - route.ts Inside route.ts: export default function POST(req: NextApoRequest, res: NextApiResponse): // YOUR DATABASE LOGIC
Giant panda
That function signature is still wrong. It should neither be a default export nor have a response parameter.
@Giant panda That function signature is still wrong. It should neither be a default export nor have a response parameter.
New Zealand Heading Dog
Yes, I realise that now, I couldn't remember the exact way to write it but that's how the method should be named just not a default export nor have a response parameter.
Chinese perchOP
Where the docs for src?
Or nothing is there?
thanks!
@Chinese perch thanks!
New Zealand Heading Dog
No problem!