How to Analyze Next.js App Bundles

In this blog post, we will learn how to analyze the code bundles generated in a Next.js app. Next.js provides us with a useful way to analyze these bundles, allowing us to understand what’s inside them and optimize our application’s performance. To get started, open the package.json file of your Next.js app and add the following three commands to the scripts section: "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build" Your updated package....

Next.js: Running Code on the Server Side or Client Side

Learn how to write code that is executed only on the specific side of your stack: either on the frontend or the backend. In your page components, you can choose to execute code exclusively on the server-side or the client-side by checking the window property. The window property exists only in the browser environment. Therefore, you can use the following code to determine if you are on the server-side: if (typeof window === 'undefined') { // Server-side code here } Similarly, you can use the following code to execute client-side code:...