This plugin let you use caravaggio with NextJS in an easy way. It transforms any image relative url to an absolute url for the current NextJS instance.
Any caravaggio url like this
https://mynextjs.com/api/assets/rs,s:300x?image=/logo.png
gets transformed into
https://mynextjs.com/api/assets/rs,s:300x?image=https://mynextjs.com/logo.png
For a complete description of how to use this plugin, read the article "NextJS + Caravaggio, serve images like a rockstar!".
Add this plugin to your Caravaggio instance
// api/assets/[...params].js
import caravaggio from 'caravaggio';
import nextPlugin from 'caravaggio-plugin-nextjs';
const ONE_MONTH = 60 * 60 * 24 * 30;
export default caravaggio({
basePath: '/api/assets',
browserCache: `s-maxage=${ONE_MONTH}`,
plugins: {
plugins: [{
name: 'nextjs',
instance: nextPlugin()
}]
}
});
Various options can be passed to the plugin constructor
- baseUrl: optional. This plugin will do its best to understand where your NextJS app is hosted.
If you want to force this value pass
baseUrl
. It must be a complete url likehttps://my-next.com
- protocol: optional. You can pass
http
orhttps
to force the protocol. IfbaseUrl
is passed , this value is ignored. By default the plugin will check NODE_ENV value and it useshttps
if it'sproduction
.
This plugin will try to understand where your NextJS website is hosted. If you pass baseUrl
options, it will be used,
otherwise it checks for VERCEL_URL
value. If you setup this environment variable the plugin will use it. Otherwise it will
check the host
header in the current request. To understand if it must use http
or https
, it will check
protocol
if you pass it, otherwise it check the value of NODE_ENV and uses https
if the variable is production
.