I've deployed website developed on NextJS with API for the contact form.
Everything works on local (dev and prod).
But, when I deploy it on my OVH CloudWeb, the button of contact form doesn't work.
I tested it with Postman and I have a 502 error.
Here, my code :
ContactSection.tsx
import React from 'react';
// @material-ui/core components
import {makeStyles} from '@material-ui/core/styles';
import {useState} from 'react';
// @material-ui/icons
// core components
import GridContainer from '../../components/Grid/GridContainer';
import GridItem from '../../components/Grid/GridItem';
import CustomInput from '../../components/CustomInput/CustomInput';
import Button from '../../components/CustomButtons/Button';
import styles from '../../styles/jss/nextjs-material-kit/pages/landingPageSections/contactStyle';
import axios from 'axios';
const useStyles = makeStyles(styles as any);
export default function ContactSection() {
const classes = useStyles();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = async (event: {preventDefault: () => void}) => {
event.preventDefault();
const data = {
name: name,
email: email,
phone: phone,
message: message,
};
axios.post('https://sokorev.com/api/contact', data).then((res) => {
console.log('Response received');
if (res.status === 200) {
console.log('Response succeeded!');
setName('');
setEmail('');
setPhone('');
setMessage('');
}
});
};
return (
Parlez-nous de votre projet
Un projet ? Une demande ? N'hésitez pas à nous contacter. Nous
reviendrons vers vous dans les plus brefs délais.
Ou contactez-nous par téléphone au
);
}
pages/api/contact.tsx
const nodemailer = require('nodemailer');
export default function(req: { body: any; }, res: any) {
const data = req.body;
const transporter = nodemailer.createTransport({
host: 'www.calvinduderussia.com/',
port: 587,
secure: false,
auth: {
user: 'XXXXXXXX',
pass: 'XXXXXXXX',
},
});
transporter.sendMail({
from: data['email'],
to: 'erwin.julliard@gmail.com',
subjet: 'Nouveau contact SOKOREV',
html:
data['message'] +
'' +
data['name'] +
'' +
data['email'] +
'' +
data['phone'],
});
console.log('Email sent !');
}
Server.js
// server.js
const {createServer} = require('http');
const {parse} = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev})
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl;
if (pathname === '/a') {
app.render(req, res, '/a', query);
} else if (pathname === '/b') {
app.render(req, res, '/b', query);
} else {
handle(req, res, parsedUrl);
}
}).listen(80, (err) => {
if (err) throw err;
console.log('> Le site est en ligne');
})
})
Could you help me please ?