What is the difference between next (dev) and next build && next start ?

[toughyear]

I know that we can run the dev server by command: npm run dev
We can build and serve the build by command: next build && next start

But I want to find the reason as to why my dev UI is different from build UI when served locally or on Vercel server.

Here is the UI in dev mode -

Here is the UI when built and served-

So I am wondering as to what might be causing this difference and how dev and build work under the hood.

If anyone is interested I have shared more info in a previous discussion - #15012

[Taiterbase]

It's been a few months since you've posted this concern. Have you resolved this issue since then?

[toiluj23]

I have a similar issue between DEV and START.

In DEV Mode:
Page is well aligned and with proper hidden texts according page size. We are using TailwindCSS...

"dev": "next-translate && next dev",

In START Mode:
Page is not respecting grid.

"start": "next-translate && next build && next start"

[toiluj23]

Sorry, no, i couldn't. @toughyear recently answered, so i have hope that his answer solve this issue. I will test it soon. So far i wasn't running the purgeCSS. I hope to fix it and reduce lot of KBs doing that. :)

[sean-clarke]

I am also interested in any differences between npm run dev and npm run build && npm run start in terms of running the same code; some failure to serve static assets when requesting λ(Server-side rendered) pages with getServerSideProps functions that make external api authentication requests

[toughyear]

Hi @sean-clarke, can you elaborate a bit more about your problem? It seems like you are saying that certain authentication requests are working when you are on dev but not when building and running afterwards. I could help better if you could explain a bit more, but here are a few things you can keep in mind -

1. The npm run dev, is optimized to run you local code with hot-reload. It is not meant for serving your dynamic site. When you use npm run build && npm run start, it creates a better-optimized output suitable for serving your site contents with code splitting and other good stuff. However, you have to understand how your data-fetching requests ( here authentication requests) work.

2. Make sure it is not a local dev and deployment difference creating this error.

3. getServerSideProps (Server-side Rendering), is a great method but comes with its own restrictions. Now there might be a slight chance that you are making those API requests via this method using a sort of Bearer token to verify your identity and If that is the case, note that this method is to be run on server and server might not have access to it. But since you are saying that it works on your dev, then this might not be an issue. Still, it's worth looking into.

4. I would suggest that if your API requests are dependent on the client (that log on to the site), you would be better off to request them via the useEffect hook on page/component load. Only if you API requests are independent of who the client is and you as the owner of the site, can only access those API requests, then only make the requests via getServerSideProps.

Hope this helps a bit. Let me know more details if you don't get it working.

[sean-clarke]

It looks like I've got it working. The issue was on the API side of things, however, I do wonder why a hungup getServerSideProps was causing the static index. Probably something I need to do a little more investigation on my end for.

@toughyear Thanks for the comments; Would you be able to elaborate a little more on 4. in the case where the API requests are the same except for the token being passed. eg. /users/me. If this is still a case where you would recommend useEffect or SWR, let me know.

[mrlectus]

But i can run npm run start without running npm run build, why is that this is after i deleted the "Out" folder npm run build produces.

[toughyear]

@Taiterbase @toiluj23, yes I was able to resolve this issue. In my case, it was due to the difference between how I had set up (dev) and next build && next start. Take note of a few things to get it sorted -

1. If you have used an external library, chances are it doesn't support server-side rendering. I was using react-carousel from Brainhubeu and it having some issues. Resolve it by importing the library via next/dynamic imports with ssr:false option.

2. Another issue was that I was using/following an outdated boilerplate code for Tailwind and NextJS. Hence the way postcss.config.js was configured was error-prone. Here is the crux of the problem. at least for me - During the dev, everything worked fine because postcss didn't purge any of the classes of third party plugins/libraries that I imported, however, they were being purged when I did npm run build and npm run start

Now let's quickly see how you can solve this issue on your part -

1. Use the inbuilt purge option provided by TailwindCSS. For this, use the official starter-code/boilerplate code from the NextJS team. As they mention there - To control the generated stylesheet's filesize, this example uses Tailwind CSS' purge option to remove unused CSS.

2. Or you could try patching the problem if you don't want to go the previous way. I would only suggest this method if you are almost done with the project and just want to get this working because this is in no way a good solution. You will have to whitelist a bunch of css files from being purged. This is what I did but you can probably whitelist a lost more CSS classes as well -

// postcss.config.js 
  
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: [
      "./node_modules/@brainhubeu/react-carousel/lib/style.css",
      "./node_modules/@brainhubeu/react-carousel/lib/style.css.map",
      "./node_modules/react-toastify/dist/*.css",
      "./components/**/*.js",
      "./pages/**/*.js",
    ],
    defaultExtractor: (content) => {
      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
      const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
      return broadMatches.concat(innerMatches);
    },
  },
];
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

Still I would suggest go the first way and copy your code from old repo to new, use SSR:false to use client-side libraries that hate SSR, and you should be good to go.

You can reach out to my Twitter @RajeevSinghn if you need help with this. Let me know if you got this working.

[brandonsueur]

Thank you for your solution, it really helps me! 👌