Update netlify dev configuration recommendation

[garrypolley]

I've been trying this out tonight and it's working like I would expect it to work.

1. Redirects with 3xx work
2. Redirects with 2xx (proxy pass) all work
3. Pages reload when updates are made
4. I can see my NextJS errors in the browser and get a hot reload fix -- if I actually fix the issue 😉 (not related to this code at all)

[lindsaylevine]

hey @garrypolley! sorry, truly swamped with things right now. thanks so much for opening this. i think @FinnWoelm had some insights here so i defer to him until i can dive into this a bit more. cheers!

[garrypolley]

Thanks for the follow-up @lindsaylevine. In working with this more it seems non-deterministic on the steps.

Sometimes I can do the steps I posted. Others I have to run the npx next-on-netlify after I do the netlify dev. I haven't investigated why it sometimes requires a rerun of the npx next-on-netlify. The good news is once it does start serving correctly -- it does the hot reloading and redning like you'd want. 🎉

[garrypolley]

I made another update to the doc suggestion here. With the steps I've updated to I get to use the reloads and all the netlify toml things locally.

[FinnWoelm]

Hi @garrypolley, thanks for using and contributing to next-on-netlify 😊 ❤️

The feature you are using (netlify dev) is actually part of netlify/cli. netlify/cli has built-in support for Next.js and supports redirects and rewrites from the _redirects file as well as running custom functions from your functions folder.

In terms of your configuration of netlify.toml, it should in fact work without manually specifying framework, command, and port. netlify dev can automatically detect if your app is built with Next.js (based on your dependencies in package.json, here is the detector script).

You don't need next-on-netlify to take advantage of any of these features — they're all part of netlify/cli. The real purpose of next-on-netlify (so far) is not for developing your Next.js app, but for deploying it on the Netlify platform. It's really about the step after you've been building your app with next dev or netlify dev.

The "Preview Locally" feature, that we're describing in the README, refers to the ability to build your app and check out the result locally prior to deployment. It's an optional pre-deployment step, that can be useful for checking if your Next.js app does indeed work as intended and for debugging when something goes wrong. In that case, we need to manually "force" the framework to static, so that we can simulate the Netlify environment (otherwise, the auto-detection of netlify/cli finds next in our package.json and expects us to launch Next.js in dev mode). That's why we recommend the framework = "#static" configuration.

We definitely want to keep the "Preview Locally" feature, but perhaps we can make it more clear that the best way to develop your Next.js app is with next dev or netlify dev. Currently, we only have this sentence in that section:

I recommend you still use next dev to build and preview your application locally.

and that's not useful if you have custom _redirects or Netlify functions. So perhaps we can a) extend that sentence and mention netlify dev and/or b) add an extra section to the README about how to best develop Next.js apps.

Thoughts?

[lindsaylevine]

hey @garrypolley - any thoughts on finn's comment? :D

[garrypolley]

Thanks for the detailed response @FinnWoelm . We develop on a few different sites that use NextJS and/or Netlify. The nice part about working between them is being able to use the netlify dev and not necessarily have to worry about which underlying framework each site is using.

I suppose the main difference between say Gatsby and NextJS with Netlify is that Gatsby kind of "just works" with netlify dev whereas NextJS requires a little bit of a different approach.

I usually prefer to run locally the same as production -- or as much as possible. That's why in this case I wanted to use next-on-netlify to try and produce as close to production locally as we can for our applications.

Is there an end goal of not needing next-on-netlify at some point in the future?

I can help update the documentation, however, my personal preference are directions that get close to what is happening in production.

In terms of your configuration of netlify.toml.....

With regards to this specifically, the configuration was necessary so the site ran locally without issue. I can test again, however, I was not able to get redirects working initially without setting those values specifically.

[erezrokah]

Hi @garrypolley, this PR suggested changes to the dev section of netlify.toml are actually the current defaults used by the CLI:
https://github.com/netlify/cli/blob/d63a3ad76af23b399cf17f039123cfc00f0f8c2a/src/detectors/next.js#L14

Running Next.js dev server doesn't generate the build artifacts Next on Netlify needs to create the Netlify functions, redirects, etc.
I believe that's the reason you've added npx next-on-netlify to the docs. Please correct me if I'm wrong.

What we really want is to run next build + next-on-netlify in watch mode which is what this PR is doing.
Then the CLI can detect you use next-on-netlify, run it in watch mode and simulate the prod environment locally.
Please let me know if I'm making sense here.

Also, I tried following the instructions and after running npx next-on-netlify I get this error:

[erezrokah]

Closing this per #162. Please comment/open a new issue if you have any questions/concerns.