Skip the Tedious Environment Setup with StackBlitz

Environment Setup is a Pain

https://zenn.dev/lunette/articles/2aa07384d8c74c

While using Docker + Dev Containers can make things a bit easier, as described in the article above,
if you want to experiment with something using Next.js, for example, you have to do a lot of additional configuration, which is a hassle...
Am I the only one who feels this way? No, I'm sure I'm not.
This time, I'd like to introduce "StackBlitz," a convenient online IDE for such situations.

What is StackBlitz?

https://stackblitz.com/

• Provides an online code editor and integrated development environment (IDE).
• Developed and operated by StackBlitz Inc., headquartered in San Francisco, California.
• No installation required, everything runs in the browser.
• Team members can develop in the same environment by simply sharing a URL.
• Adopts the same editor UI as VSCode.
• Easily import GitHub repositories.

Pricing (March 2026)

First, let's feel free to try the free plan.

Personal	Pro	Teams	Enterprise & Self-hosted
$0/month	$18/month	$55/member/month	Contact Us

Detailed differences for each plan are listed on the pricing page.
https://stackblitz.com/pricing

Prerequisites

• Assume that a GitHub account or a Google account has already been created.
• For a trial, we will use the Personal plan this time.

Creating a StackBlitz Account

1. You can sign in with a GitHub account or a Google account.
   

2. Since you want to use the Personal plan, select "Personal projects as a hobby," enter your name and email address, then click "Go to StackBlitz."
   

Quickly Creating a Next.js Project

1. Click "+New project" on the dashboard.
   

2. A modal will open, so click "Next.js."
   

3. A Next.js project will be created in just a few seconds.
   You can see that the execution result is displayed in the tab on the right, with the same UI as VSCode.
   

Cautions

Upon checking package.json, you can see that tailwindcss and typescript are properly included.
However, it's important to note that the versions included by default are not the latest.

The reason why it's not the latest Next.js v16 is that the StackBlitz environment does not support Next.js v16's Turbopack. Therefore, if you wish to use Next.js v16, it is recommended to set up your local environment, troublesome as it may be.

Conclusion

Scenarios where StackBlitz can be utilized

• When you want to lightly learn or verify front-end development.
• When you want to share code or debug with team members.
• When you want to verify or test OSS functionality solely in a browser.
• When you want to publish working demos for technical articles or educational materials.
• When you want to create prototypes for API clients or standalone UIs.

Scenarios where StackBlitz should not be used

• When you want to use the latest version of an environment.
• When you want to test under the same conditions as a production environment.
• When environmental reproducibility, such as fixed Docker or Node.js versions, is required.
• When performing performance measurements or optimizations.
• When using native-dependent packages.

While StackBlitz is an excellent environment for "code sharing, verification, and learning,"
due to its characteristic of virtualizing the Node.js execution environment and build infrastructure in the browser,
it does not guarantee behavior close to a production environment.
Therefore, for development based on the latest framework versions or production environments,
it is desirable to combine it with local environment verification.