17. Next.js Tutorial (4). API Routes

 1. Create an API Route

Source: https://nextjs.org/learn/basics/api-routes/creating-api-routes

The files must be in the pages/api folder. In this example (pages/api/hello.ts), that can be accessed by http://localhost:3000/api/hello and will return {"text":"Hello"}

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

Note: Don't fetch an api route from getStaticprops or getStaticPaths

You can save to a DB some info from a form:

export default function handler(req, res) {
  const email = req.body.email;
  // Then save email to your database, etc...
}




Comentarios

Publicar un comentario

Entradas populares de este blog

16. Next.js Tutorial (3). Dynamic Routes. Async functions getStaticPaths and getStaticProps

1. Dynamic page Source:  https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticpaths Source:  https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops 1. Create a page at /pages/posts/[id].js where the brackets "[]" means a dynamic page 2. This file must contain: A React component to render this page getStaticPaths  async function that returns an array of possible values of id. And has the fallback property. This function is called at build time and needs to be exported ( export async function getStaticPaths() ) getStaticProps  async which fetches necessary data for the post with the id; and needs to be exported too ( export async function  getStaticProps ()  ) The fallback property of the  getStaticPaths  means: If fallback is false , then any paths not returned by getStaticPaths will result in a 404 page . If fallback is true , it will serve the paths generated at build time. If it was not generated at buil...
Leer más

10. React deployment on Nginx (5). Passing client certificate DN to react client

Imagen
 0. Nginx installation #------------------------------------------------------ # INSTALLATION # @see Mohammad Faisal #------------------------------------------------------ #1. Install nginx sudo apt-get update sudo apt-get install nginx #2. verify installation sudo nginx -v #------------------------------------------------------ # STARTUP SETTINGS #------------------------------------------------------ #start Nginx when server restarts sudo systemctl enable nginx #only for checking if nginx is running systemctl status nginx Now, change the local port (for instance to 8081) if you have another server (apache) in port 80 sudo nano /etc/nginx/sites-available/default ( OLD VERSIONS of NGINX !!! ) In newer versions of nginx use this file instead sudo nano /etc/nginx/conf.d/default.conf and edit the port from 80 to 8081 and also change the root from /var/www/html   to another folder like /home/ximo/my-react-app , but to avoid router probl...
Leer más

7. React deployment on Nodejs and Express.js (1). Introduction and Production and development discrepancies or errors

1. Build the React app for production @See Achilles Moraites First, use npm start and verify that your application runs ok.  Then install serve (if you have not installed it before) and run the production code #Install globally the "serve" javascript web server sudo npm install -g serve #Run the application serve -s buid And now point to " http://localhost:3000 " in your browser and test if it runs well 2. Development and Production irregularities or errors  Maybe it cannot run as desired. This  "commented" code works in development but not in production // const isFirstRender = useRef(true) ; //Avoid executing code in the beginning useEffect ( ( ) = > { /* Works with development but DO'NT work with production buil d !!!!!     if (isFirstRender.current) {       isFirstRender.current = false;       return; // return early if first r...
Leer más