Next.js: Adding Features Specifically for Development Mode

In some cases, it may be necessary to have different behavior for a website or app during development compared to its production/live version. Next.js provides an easy way to achieve this by leveraging the value of process.env.NODE_ENV, which is automatically set to 'development' when running the application with npm run dev. For instance, let’s say we have an API route that should not be publicly accessible. To address this, we can include the following code at the top of the route:...

Understanding the Icons Used by Next.js in Your App

Discover the meaning behind the icons generated by Next.js during development. When working on a Next.js app, you may have noticed a small icon in the bottom right corner of the page that resembles a lightning bolt. If you hover over the icon, you will see the message “Prerendered page”. This icon is only visible in development mode and indicates that the page is eligible for automatic static optimization. Essentially, this means that the page does not rely on data that needs to be fetched at runtime....