Mock server

We provide some simple examples on how to set up a mock API so you can work in your localhost.


Usage in Localhost
Watch video

Step 1: Download resource

  • Download resource inside the README.md or MOCK_API.md.
v6
next-ts
  ├── README.md
  ├── ...

v5
Minimal_Typescript
  ├── MOCK_API.md
  ├── ...

Step 2: Start local server

  • Start project minimal-api-dev folder.
  • Make sure you are running on the correct port http://localhost:7272.
Change port
DEV_API: "http://localhost:7272",
next.config.mjs
Change port
"dev": "next dev -p 7272",
"start": "next start -p 7272",
package.json
Install and run
yarn install
yarn dev

Step 3: Update .env in your current project:

  • next.js
  • vite.js
  • starter-next-ts
  • starter-vite-ts
  • ...
VITE_SERVER_URL=http://localhost:7272
VITE_ASSET_URL=http://localhost:7272
next.js, vite.js...

Usage on Production

Step 1:

  • Push source code minimal-api-dev to your github.
  • Deploy on your vercel.com.

Step 2:

In next.config.mjs of minimal-api-dev.

const nextConfig = {
reactStrictMode: true,
  env: {
    DEV_API: 'http://localhost:7272',
    PRODUCTION_API: 'https://your-domain-api.vercel.app',
  },
};
 
export default nextConfig;
next.config.mjs

Step 3: Update .env in your current project:

  • next.js
  • vite.js
  • starter-next-ts
  • starter-vite-ts
  • ...
VITE_SERVER_URL=https://your-domain-api.vercel.app
VITE_ASSET_URL=https://your-domain-api.vercel.app
vite-js, next-js...