Endpoint

This repo demonstrates Next.js 14 Route Handling with App router.

The repo demonstrates how Route Handlers can be used to create a set of RESTful routes for GET, POST, PUT and DELETE.

The routes are all handled by the localhost/api endpoint.

This repo is designed to be used in conjunction with the React Vite Single Page Application that is available at https://github.com/mustbebuilt/vite-spa-endpoint

Set up

This repo was created as a Next.js project bootstrapped with create-next-app.

To run clone the repo and then in terminal run:

npm install

It assumes a MySQL database set up with an SQL table of staff.

CREATE TABLE staff (
    id SERIAL PRIMARY KEY,       -- Auto-incrementing unique identifier for each staff member
    name VARCHAR(100) NOT NULL,  -- Name of the staff member
    email VARCHAR(100) NOT NULL, -- Email of the staff member
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- Timestamp for when the record was created
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP -- Timestamp for the last update
);

Important

The environment variables file .env.local has been excluded from this repo so will need to be created to replicate the app.

CORS

The next.config.mjs is used to configure the endpoints so that there are no CORS issues. CORS (Cross-Origin Resource Sharing) issues occur when the frontend and backend are hosted on different origins, and the browser blocks the request due to security policies. To enable communication to this repo from another using HTTP calls, the next.config.mjs has been set up so that any origin can call the endpoints and use HTTP methods of GET, POST, PUT, PATCH and DELETE.

Running

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.