Introduction

Working with Next.js is a pleasure, but switching context between api-routes, static-site-generation and incremental-static-regeneration is less than ideal. Next-runtime enables you to use getServerSideProps for all of it.

Get rid of the page props only limitation, and make it handle form submissions as well. Complete with a free JSON api, without any additional work.

#

Usage

In case you're not the documentation type of person, here's a quick example to get you up and running. We'll go over it in the following pages, so no worries if you don't get it right away.

To not confuse people that are unfamiliar with TypeScript, I'm not showing type annotations. That being said, the project is fully annotated.

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>
  );
}

#

Credits

I've always been a big fan of simplicity, and reducing boilerplate. The YouTube video CDN Caching, Static Site Generation, and Server Side Rendering by Ryan Florence just clicked, and has been an huge inspiration for this project. You can clearly see my attempt to bring a bit of the simplicity that Remix offers to Next.js. Some functions have their signature all over it, because my goal is to have a Remix-like API/philosophy in Next for those that are unable to switch. Credit where credit's due. ❤️ Remix, go check 'm out!