next-runtime: A TypeScript repository from anneau

All you need to handle POST requests and file uploads in getServerSideProps.

Documentation

All documentation and guides can be found at next-runtime.meijer.ws.

Features

next-runtime aims to move more logic to the "runtime part" of your Next.js server, and less static site generation. With proper cache headers, every server is an (incremental) static site generator.

To achieve that, we provide you a convenient API to:

Handle POST requests in getServerSideProps.
Handle file uploads in getServerSideProps.
Easily manage headers and cookies.
Reuse getServerSideProps as zero-config JSON api.

Usage

In case you're not the documentation type of person, here's a quick example to get you up and running. Please consult the docs if this leaves you with questions.

import fs from 'fs';
import { handle, json } from 'next-runtime';

export const getServerSideProps = handle({
  async upload({ file, stream }) {
    stream.pipe(fs.createWriteStream(`/uploads/${file.name}`));
  },

  async get({ params, query }) {
    return json({ name: 'Stephan Meijer' });
  },

  async post({ req: { body } }) {
    return json({ message: 'Thanks for your submission!' });
  },
});

export default function Home({ name, message }) {
  if (message) {
    return <p>{message}</p>;
  }

  return (
    <form method="post" encType="multipart/form-data">
      <input name="name" defaultValue={name} />
      <input type="file" name="file" />
      <button type="submit">submit</button>
    </form>
  );
}

Sponsor

Are you, or your employer, a satisfied user of this, or any of my other projects. Then please consider sponsoring my work so I can dedicate more time to maintaining this kind of projects.