Next.js

Next.js: How to Populate the Head Tag with Custom Tags

Customizing the head tag of your Next.js app is a useful way to enhance your page’s metadata. Whether you want to modify the page title or add a custom meta tag, you can easily do so by following the steps below. Inside your Next.js page component, import the Head component from next/head: import Head from 'next/head' Include the Head component in your component’s JSX output: const House = props => ( <div> <Head> <title>The page title</title> {/* Add any additional tags here */} </Head> {/* The rest of the JSX */} </div> ) export default House Within the Head component, you can add any HTML tag that you’d like to appear in the <head> section of the page....

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:...

Next.js: Troubleshooting Component State Not Refreshing on Navigation

I recently encountered an issue where the state of a component was not getting refreshed when navigating with the Next.js router. After some investigation, I discovered the problem and found a solution. In my case, I had a component that used the useState() hook to manage some variables. However, even though I expected the state to update when navigating to a different page, it remained unchanged. Upon further examination, I realized that the issue was related to my custom _app....

Resolving the \"Objects are not valid as a React child\" Error

In one of my React (Next.js) applications, I encountered the following error message: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. After spending some time investigating the issue, I discovered that the error occurred because I had mistakenly exported my page component with the async keyword. This mistake happened because I had copied the component from another Next....

Resolving the `module not found` error in Next.js

While working with Next.js and performing sanitization on a variable, you may encounter the following error message: Module not found: Error: Can't resolve 'net' This error indicates that a core Node.js module is missing. It is important not to run npm install net or any similar commands. If you have already attempted to install such modules, execute npm uninstall to remove them. The root cause of this issue is that Next....

Server Side Rendering with React

Server Side Rendering (SSR), also known as Server-Side Rendering, refers to the process of rendering a JavaScript application on the server instead of the browser. There are several reasons why we should consider using SSR with React: Faster first page load time: SSR allows your site to load faster, enhancing the user experience. Improved SEO: Search engines struggle to efficiently index applications that rely solely on client-side rendering. SSR helps search engines understand and index your content correctly....

Styling Next.js components using CSS

In Next.js, we have the freedom to choose any library for styling React components. However, Next.js comes with its own built-in library called styled-jsx which offers scoped CSS. This allows us to write CSS that only affects the specific component it is applied to, making it easier to maintain. To add CSS to a React component in Next.js, we need to insert it inside a <style jsx> block in the JSX code....

The 2023 Bootcamp: Level Up Your Web Development Skills

Welcome to the latest update on the highly anticipated 2023 cohort of bootcamp.dev! Get ready to take your web development skills to the next level with our intensive and comprehensive 10-week online course. The Web Development Bootcamp covers all the essentials, including HTML, CSS, JavaScript, Tailwind, Astro, React, and Next.js. Designed for both beginners and developers with some prior knowledge, this course will equip you with the tools and knowledge needed to succeed in the world of web development....

The Next.js App Bundles

In a Next.js app, the code is divided into different bundles to enhance performance. These bundles are loaded as JavaScript files when you view the page source of the app. To break down the code and make it more understandable, let’s use an HTML formatter: <!DOCTYPE html> <html> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" /> <meta name="next-head-count" content="2" /> <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" /> <link rel="preload" href="/_next/static/runtime/webpack....

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....