OVHcloud Community

Welcome to your community space. Ask questions, search for information, post content, and interact with other OVHcloud Community members.

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


#1

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 (
<div id={‘contact’} className={classes.section}>

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.

<CustomInput labelText="Votre Nom" id="name" value={name} formControlProps={{ fullWidth: true, }} inputProps={{ onChange: (e: { target: {value: React.SetStateAction}; }) => setName(e.target.value), }} /> <CustomInput labelText="Votre Email" id="email" value={email} formControlProps={{ fullWidth: true, }} inputProps={{ onChange: (e: { target: {value: React.SetStateAction}; }) => setEmail(e.target.value), }} /> <CustomInput 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), }} /> <CustomInput 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.

Envoyer
  <GridContainer justify="center" className={undefined}>
    <GridItem cs={12} sm={12} md={8} className={classes.textCenter}>
      <h2 className={classes.title}>Ou contactez-nous par téléphone au</h2>
      <Button
        type={undefined}
        color="danger"
        rel={undefined}
        href={undefined}
        target={undefined}
        round={undefined}
        fullWidth={undefined}
        disabled={undefined}
        simple={undefined}
        size="lg"
        block={undefined}
        link={undefined}
        justIcon={undefined}
        className={undefined}
      >
              09 81 21 82 31
      </Button>
    </GridItem>
  </GridContainer>
</div>

);
}
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 ?