A developer is encountering an issue with their Next.js 15 application on a Windows 10 Acer laptop, where a form intended to add a book fails to trigger its submission handler, preventing the addition of new books.
The project utilizes Node.js v22.12.0 and includes configurations such as middleware.ts, next.config.ts, and postcss.config.mjs. The package.json file lists dependencies like @clerk/nextjs, formik, mysql, and react, among others. The developer has shared their code on GitHub (https://github.com/DragonOsman/personal-library), specifically pointing to the /src/app/api/books/add-book/route.ts and /src/app/books/add-book/page.tsx files for reference.
Additionally, they encounter an ECONNREFUSED error during deployment, originating from .next/server/app/api/webhooks/route.js. Any ideas or pointers you can give them?
Based on your description, there are two distinct issues to address: the form submission not triggering and the ECONNREFUSED error during deployment. Let's tackle each one:
The issue with the form not submitting could be caused by several factors:
In your /src/app/books/add-book/page.tsx file, ensure your form submission handler is properly set up:
// Make sure your onSubmit handler is correctly implemented
const handleSubmit = async (values, { setSubmitting }) => {
try {
const response = await fetch('/api/books/add-book', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(values),
});
// Handle response
if (!response.ok) {
throw new Error('Failed to add book');
}
// Success handling
} catch (error) {
console.error('Error adding book:', error);
} finally {
setSubmitting(false);
}
};Ensure Formik is correctly configured:
<Formik
initialValues={{ title: '', author: '', /* other fields */ }}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting }) => (
<Form>
{/* Form fields */}
<button type="submit" disabled={isSubmitting}>
Add Book
</button>
</Form>
)}
</Formik>In your /src/app/api/books/add-book/route.ts file, ensure you're properly handling POST requests:
export async function POST(request: Request) {
try {
const body = await request.json();
// Process the data and add to database
return new Response(JSON.stringify({ success: true }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
console.error('Error in add-book API route:', error);
return new Response(JSON.stringify({ error: 'Failed to add book' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
}The ECONNREFUSED error typically indicates a failed connection attempt. Since it's occurring in the webhooks route, it's likely related to an external service connection.
If your webhook is trying to connect to your MySQL database:
// Make sure your connection string is correct and the database is accessible
// from your deployment environment
const connection = mysql.createConnection({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME,
});Since you're using @clerk/nextjs, check if the webhook route is properly configured:
// In your webhook route handler
export async function POST(request: Request) {
// Verify the webhook signature
const headerPayload = request.headers;
// Process webhook
// ...
}Ensure all necessary environment variables are properly set in your Vercel deployment:
Check if your deployment environment has the necessary network access to connect to external services. Some services might require IP allowlisting or VPC configurations.
If you need more specific guidance, please share the relevant code snippets from the files you mentioned, and I can provide more targeted assistance.