Publishing a Next JS App
Valist offers a different options for uploading your Next JS application, making deployment a breeze. The following steps will guide you through the process seamlessly.
Step 1: Build your project statically
You'll first need to run next export
to create an out
folder instead of the normal _next
folder that is served.
Make sure you have created a Next JS project:
npx create-next-app
First, you will need to add next export
to your package.json
:
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next export",
"start": "next start",
"lint": "next lint"
},
This can be done by copying and adding "export": "next export",
line under the build
script.
Unfortunately, Next.js server-side features like image optimization and API routes are not supported in static build environments. If you are using next/image
for your images, you will need to add an images
property to the nextConfig
object in your next.config.js
file. The value of image
should be an object having a property called unoptimized
set to true
. For example:
const nextConfig={
...
images: {
unoptimized: true,
},
...
}
Otherwise, you will see an error like the following:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api
You can still communicate with existing HTTP backends via the static frontend!
Then, build and run the app by running the following:
npm run build
npm run export
This will then create a folder named out
in the project directory. Feel free to add the build
script to the beginning of the export
script for more convenience!
You can now upload this to Valist directly, you're all set!
Step 2: Publishing a Release
Now that you've built your application, you have 3 different options for publishing depending on your preferences!
To publish a Release with the web dashboard, make sure your Project Type
is set to web
in the settings, then click New Release
on your project page.
This will show a simple upload form:

The
Release Image
allows you to attach an image to the release.The
Release Name
works the same way as theaccount
andproject
names -- it is an immutable tag that represents the version of the release and is accessible at theaccount/project/release
the path once published.The
Display Name
is simply a human-readable name as an alternative to the immutable tag.The
Description
is a Markdown-compatible description for the release.
The next tab allows you to drag and drop or click to upload a folder. Here is where you will drag your out
folder:

After clicking Create
, you will be prompted to sign a message for the release! ๐
That's all you need to publish web apps with Valist!
After publishing, your application will be highly available via IPFS, using links like the following:
https://bafybeihpv3piaiybqgqcvqmgpq3dkjz55czkndkjdqjpskagml3fnczih4.ipfs.gateway.valist.io/
You can access this IPFS hash from anywhere on the IPFS network including your own node, and from common gateways like IPFS.io, dweb.link, and Cloudflare:
http://bafybeihpv3piaiybqgqcvqmgpq3dkjz55czkndkjdqjpskagml3fnczih4.ipfs.dweb.link/
Please note that IPFS gateways that don't use subdomains are not secure for accessing web applications due to sharing the same origin.
IPFS Gateways support either or both of the following formats:
Subdomain gateway mode: e.g.
https://<CID>.ipfs.dweb.link/
Path gateway mode: e.g.
https://ipfs.io/ipfs/<CID>/
You only want to access web apps from IPFS via the first type of gateway. This is because the browser will treat the subdomain as a different "origin" and therefore treat local storage and other security policies in a way that prevents other websites from interfering with your app.
Last updated