I want to carve out API Routes

[ghost]

Summary

I was deploying with Vercel, and I had a DDoS attack that consumed a lot of Edge middleware counts
My project is too small to sign up for a Pro plan, so I am considering moving to another cheap server.
Then I learned that I could use "next export" to output an HTML file and publish it as a static file.
My project uses CSR, doesn't use getServersideProps, etc., and writes all the processing in API Routes, so I'm trying to separate the servers that host static files from those that run API Routes.

So, is there a way to cut out only API Routes?
By placing static files on an unrestricted server that couldn't run Next.js, and placing API Routes on a separate, cost-effective server, we thought we could limit the damage of static file attacks.

Additional information

No response

Example

No response

[icyJoseph]

You can leverage custom page extensions:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

if (process.env.NODE_ENV === "production") {
  if (process.env.STATIC_ONLY === "true") {
    nextConfig.pageExtensions = ["page.tsx", "page.ts", "page.jsx", "page.js"];
    nextConfig.output = "export";
  } else {
    nextConfig.pageExtensions = ["api.ts", "api.js"];
  }
} else {
  nextConfig.pageExtensions = [
    "page.tsx",
    "page.ts",
    "page.jsx",
    "page.js",
    "api.ts",
    "api.js",
  ];
}

module.exports = nextConfig;

And then you can have this file structure:

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   │   └── hello.api.ts
│   └── index.page.tsx
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── styles
│   └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

4 directories, 16 files

And you'd build the static export like:

STATIC_ONLY=true yarn build
yarn run v1.22.19
$ next build
- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (3/3)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ /                                      257 B            74 kB
└ ○ /404                                   182 B            74 kB
+ First Load JS shared by all              73.8 kB
  ├ chunks/framework-d9a5b8a47d18b2d5.js   45.2 kB
  ├ chunks/main-d5c9aef8f3ea3bae.js        27.7 kB
  ├ chunks/pages/_app-aea6920bd27938ca.js  195 B
  └ chunks/webpack-4e7214a60fad8e88.js     712 B

○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 3.42s.

Notice, that there's no API routes on the output.

And just doing yarn build:

yarn build
yarn run v1.22.19
$ next build
- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (2/2)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ /404                                   182 B          73.8 kB
└ λ /api/hello                             0 B            73.6 kB
+ First Load JS shared by all              73.6 kB
  ├ chunks/framework-90129f2023baa347.js   45 kB
  ├ chunks/main-d5c9aef8f3ea3bae.js        27.7 kB
  ├ chunks/pages/_app-aea6920bd27938ca.js  195 B
  └ chunks/webpack-4e7214a60fad8e88.js     712 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 2.29s.

Notice there's no landing page anymore, only API routes, and the 404.

Unfortunately, you see, we output chunks anyway... but hej, it kinda works right?

Dev Mode

In Dev Mode everything should just work fine.

[icyJoseph]

Forgot to mention that, to reach for API routes, you'd need to use absolute paths, through an ENV var, which points to the API's URL

[ghost]

Thank you, doing this has solved it

[banuragaxioned]

In case anyone lands in here to solve the same problem ..

I wanted to strip away Embedded Sanity Studio on the deployed versions but keep them for local development. Was able to do that on Vercel using .vercelignore. See more on https://vercel.com/docs/deployments/vercel-ignore.