NextJS QuicksStart Template Issues

[gigabit-eth]

Describe the bug

I am running the NextJS quick start terminal command 'npm init frog -- -t next' and not getting the desired output.

There are a number of issues when trying to get this particular template up and running with just the command mentioned above.

You must pull a few steps from the manual installation as well to get it functioning as intended.

The Minimal Reproducible Example linked has these changes implemented as described below in the Steps To Reproduce.

Link to Minimal Reproducible Example

https://github.com/gigabit-eth/froggy-next-boiler

Steps To Reproduce

• 1. install via quickstart command: npm init frog -- -t next
• 2. follow the console instructions and run command: npm install
• *consoleLogFix: 4. Head to http://localhost:5173/dev
  • It's actually running on localhost:3000 because of Nextjs
  • clicking the link on the home page "Head to localhost:3000/api for your frame endpoint." leads to a 404 page "http://localhost:3000/api/dev"
  • The route.tsx file contains 'import { handle } from "frog/vercel";' and not 'import { handle } from "frog/next";'
• 3. Add Handlers:
     • Add - title: 'Frog Frame', to the Frog constructor.
     • Change the 'import { handle } from "frog/vercel";' to 'import { handle } from "frog/next";'
• 4. Setup devtools:
     • add these to the top of your route.tsx file
     • 'import { devtools } from 'frog/dev''
     • 'import { serveStatic } from 'frog/serve-static''
     • add: 'devtools(app, { serveStatic })' right above your 'export const GET = handle(app)'
• 5. Add scripts to package.json
     • Add Vercel package: npm install vercel@latest
     • Add to "Scripts:" block: "deploy": "vercel"

Frog Version

0.15.9

TypeScript Version

"typescript": "^5"

Check existing issues

• [X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[dalechyn]

Hey, @gigabit-eth!

Going step by step to reproduce your issue:

Head to http://localhost:5173/dev It's actually running on localhost:3000 because of Nextjs

When npm init frog -- -t next is run, a correct port is shown

The app also runs and I can't see a 404 error when http://localhost:3000/api/dev is visited. Are you sure it's running on port 3000?

The only issue I saw is that title is not set which could have been a problem with the latest package rollout.

I'm also not quite sure what are the exact issues that you're experiencing – steps to reproduce look like a mix of problems & text from the docs, can you please re-format them? Thank you!