next-storage-provider

next-storage-provider

A Next.JS plugin to store and cache ISR rendered pages using Redis and Amazon S3 like APIs

❗ Important before using ❗

Using a custom storage provider in Next.JS is currently NOT supported (and probably won't be in the near future) and this plugin relies on this pull request made by MartinLG.
If you want to use this plugin you must use the extends-storage-and-cache branch from his Next.JS's fork or modify and compile Next yourself.

Install

yarn install next-storage-provider

Usage

Create a next.config.js in your project.

Next-storage-provider works out of the box with the default configuration file of Redis (not recommended)

// next.config.js
const withStorageProvider = require("next-storage-provider");
module.exports = withStorageProvider({
	redis: {},
});

With next-compose-plugins

// next.config.js
const withPlugins = require("next-compose-plugins");
const withStorageProvider = require("next-storage-provider");

module.exports = withPlugins([
	[
		withStorageProvider,
		{
			redis: {},
		},
	],
]);

Redis configuration

Redis should be set as an LRU (or LFU) cache using the maxmemory directive with an eviction policy of your choice.
See Using Redis as an LRU cache for more.

Options

redis

This plugin uses ioredis as Redis client.
You can either pass an existing ioredis client or pass an object with ioredis options.

const Redis = require("ioredis");
const redisClient = new Redis({
	host: "127.0.0.1",
	port: 7000,
});

const withStorageProvider = require("next-storage-provider");

module.exports = withStorageProvider({
	redis: redisClient,
});

or

const withStorageProvider = require("next-storage-provider");
module.exports = withStorageProvider({
	redis: {
		host: "127.0.0.1",
		port: 6380,
		username: "user",
		passoword: "password",
	},
});

prefix

Redis only.
The prefix that will be used for the key in redis.
Defaults to next_cache.

module.exports = withStorageProvider({
	prefix: "my_prefix",
});

fallback

Redis only.
If set to true, whenever trying to get the cache or storing a page fails, a per-process LRU cache will be used as fallback to get/store pages.
Defaults to false.

module.exports = withStorageProvider({
	redis: {},
	fallback: true,
});

max

Only used when fallback is used.
Sets the maximum size of the cache.
Defaults to 50 MB.

module.exports = withStorageProvider({
	max: 100 * 1024 * 1024, // 100 MB,
});

expire

Whether cached pages should be removed from Redis after their revalidate time has passed.
If a cached entry expires, no cached content will be sent and the user will receive the rendered page after Next is done rendering. This way you can avoid showing a cached entry to the user that will trigger a page re-render after revalidate.
Defaults to false.

module.exports = withStorageProvider({
	redis: {},
	expire: true,
});

useS3

If set to true, an Amazon S3 like object storage will be used to get/store generated HTML and JSON page files and a per-process LRU cache will be used instead.
Files are only requested if the page data is missing from the cache, and are only stored when a page is regenerated (2 requests per page are made when getting or storing data, as the HTML and JSON (page props) are stored separately).

S3Config

Next-storage-provider uses MinIO-JS as S3 client.
You can find all the options available in MinIO's documentation.

Example with Amazon S3:

const withStorageProvider = require("next-storage-provider");
module.exports = withStorageProvider({
	useS3: true,

	S3Config: {
		endPoint: "s3.amazonaws.com",
		accessKey: "YOUR-ACCESSKEYID",
		secretKey: "YOUR-SECRETACCESSKEY",
	},
});

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Both ESlint and Prettier checks must pass:

yarn run lint
yarn run prettier

Run both ESLint and Prettier on all files:

yarn run format

If changing the README:

yarn run prettier:readme
yarn run format:readme

📝 License

Copyright © 2021 reboxer (https://github.com/reboxer).
This project is MIT licensed.