API NextJS doesn't work in production (OVH WEBCLOUD)
BMPCreated with Sketch.BMPZIPCreated with Sketch.ZIPXLSCreated with Sketch.XLSTXTCreated with Sketch.TXTPPTCreated with Sketch.PPTPNGCreated with Sketch.PNGPDFCreated with Sketch.PDFJPGCreated with Sketch.JPGGIFCreated with Sketch.GIFDOCCreated with Sketch.DOC Error Created with Sketch.
Question

API NextJS doesn't work in production (OVH WEBCLOUD)

by
ManahilM
Created on 2021-09-26 09:16:39 (edited on 2024-09-04 14:24:31) in General Chat

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.





labelText="Votre Nom"
id="name"
value={name}
formControlProps={{
fullWidth: true,
}}
inputProps={{
onChange: (e: {
target: {value: React.SetStateAction};
}) => setName(e.target.value),
}}
/>


labelText="Votre Email"
id="email"
value={email}
formControlProps={{
fullWidth: true,
}}
inputProps={{
onChange: (e: {
target: {value: React.SetStateAction};
}) => setEmail(e.target.value),
}}
/>


labelText="Votre Numéro de téléphone"
id="phone"
value={phone}
formControlProps={{
fullWidth: true,
}}
inputProps={{
onChange: (e: {
target: {value: React.SetStateAction};
}) => setPhone(e.target.value),
}}
/>

labelText="Votre Message"
id="message"
value={message}
formControlProps={{
fullWidth: true,
className: classes.textArea,
}}
inputProps={{
onChange: (e: {
target: {value: React.SetStateAction};
}) => setMessage(e.target.value),
multiline: true,
rows: 5,
}}
/>


Protection des données personnelles : Sokorev construction &
rénovation SAS situé au 32 avenue madame Eugène Roederer 51390
Gueux met en œuvre un traitement de données à caractère
personnel nécessaire afin de nous permettre de vous contacter en
réponse au message que vous nous laissez. Votre message peut
être orienté vers le département responsable du traitement de
votre demande qui est alors chargé de vous répondre. À cet
égard, les données collectées sont toutes obligatoires. Les
destinataires de vos données à caractère personnel sont la
Direction communication Sokorev construction & rénovation SAS,
les différentes entités composant Sokorev construction &
rénovation SAS, et les prestataires participant à la gestion du
service au titre duquel vous nous interrogez. Vos données à
caractère personnel seront conservées pendant toute la durée
nécessaire au service de gestion telle que prescrite par les
lois applicables en la matière. Vous disposez à tout moment d’un
droit d’accès, de rectification, ou d’effacement ou de
limitation ou d’opposition et de portabilité de vos données à
caractère personnel ainsi que du droit d’organiser des
directives après votre mort. Vous disposez du droit d’introduire
une réclamation auprès d’une autorité de contrôle en charge de
la protection des données personnelles. Le Délégué à la
Protection des Données de Sokorev construction & rénovation SAS
est joignable à l’adresse suivante : 32 avenue madame Eugène
Roederer 51390 Gueux.


EN CLIQUANT SUR LE BOUTON "ENVOYER", JE RECONNAIS AVOIR PRIS
CONNAISSANCE ET ACCEPTER LES CONDITIONS CI-DESSUS.












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 ?


Replies are currently disabled for this question.