I vibe coding a tic tac toe in nextjs, nothing fancy. After couple of revision, the preview stuck at starting app… Forever even I pass the log to the agent, it says resolve, still the same issue
the VM always start after hours of idle, i assume.
here the log it shown
2025-06-25T22:45:27Z [web] at async Module.nextDev (/home/user/studio/node_modules/next/dist/cli/next-dev.js:175:14)
2025-06-25T22:45:27Z [web]
2025-06-25T22:45:27Z [web] Node.js v20.19.0
2025-06-25T22:45:27Z [web]
2025-06-25T22:45:27Z [web] ✘ Preview failed to start
…
and the agent auto patch
Of course. I've analyzed the server logs, and the error is very specific. Thank you for providing them.
The log says: Error: Configuring Next.js via 'next.config.ts' is not supported. Please replace the file with 'next.config.js' or 'next.config.mjs'.
This means the Next.js server is having trouble loading its configuration from the TypeScript file (next.config.ts). While this is sometimes due to a missing dependency, the most direct and reliable way to fix it is to follow the error's suggestion and use a JavaScript configuration file instead.
I will perform the following changes:
Create a new next.config.js file with your existing configuration.
Modify the old next.config.ts file to be empty, so that Next.js will use the new .js file instead.
then now home screen became 404 page not found lol… the studio never stop surprise me 
I’ve had this happen before.
If your server is unable to start, prototyper may make some hasty decisions.
It can change your package.json and the version of Next you’re using.
I’m using Next 15.3.4 and --turbo in my pnpm dev commands.
If you’re on the latest version of Next, it will use the .ts config file.
I would audit your package.json first.
some feedback, i think still very risky jz purely vibe coding without knowing nextjs. the AI could jz screw up and create messy structure, see the reply given
Of course. I see the 404 error, and I understand how frustrating it is when the app won't load, especially after all the dependency issues. I've analyzed the project's structure, and I've found the root cause.
Your project has two app directories: one at the root (app/) and one inside src/ (src/app/). When both exist, Next.js prioritizes the root app/ directory for routing. Since your actual pages are in src/app/, Next.js can't find a home page in the app/ directory and returns a 404
as a product manager, i expect the “product” should know basic nextjs structure without create redundancy. Yeah i know there is a footer notes like “Gemini make mistakes” but it will scare people away from using it to build a production-ready app, and end up Google use my free labour to test their product
Also, anytime you change your package.json, you’ll want to run this.
I wouldn’t describe it as risky, you just have to check its work.
As a product manager, I bet you have had to do that before.
It is telling you very clearly what the error is.
Even if Gemini caused it, it can fix it.
Just like any developer can.
Yeah i mean, i m trying to use firebase studio to prove if i could purely vibe code a product, knowing the corp direction, high level tech term, basic programming knowledge,
but no NextJS or Tailwind knowledge.
Meaning i m 100% relying the AI agent to fix backend coding and i handling what my stakeholder wants. Hence if a Next/TypeScript developer is required, i have to budget it into my project plan
You can do that, you just have to keep trying.
The error is clear, you have conflicting src and app directories.
I would start with telling Gemini to fix that, knowing you’re using Next.
I would also tell it that you want to use the latest Next and Node releases.
It may still try to downgrade you to Next v14 because it thinks that is stable.
You just have to instruct it otherwise. You are in control of the direction.
Once your app is stable with these configurations you will be able to develop more.
This is a challenge when you start from a blank foundation, as opposed to a template.
Once you have a working package.json file and your project is running, you can clone it.
1 Like
“fun fact”, the agent made a stunning tic tac toe, then i vibe “hey the game sharing link isn’t work with xxx error”, it politely apologize, then restructure the code causing a more serious error “404 page not found”
then i feedback it’s a 404 error, it even start moving the scripts (as below).
tht’s my concern, it’s trying to fix one error and create 10 more breaks. So i ain’t sure it’s ready for any business not back by a mature developer, even though i agree the agent can code faster than human
Sometimes you have to catch these errors early.
Instead of proceeding with a bad code branch, you have to ‘restore’ from backup.
In other words, you need to checkout a branch before the bad code was commit.
Then describe why you had to do that to Gemini so it understands what not to do.
You said so yourself that it can code faster than any human.
You just have to make sure it follows the right path.
1 Like