Latest Tutorials

Disclaimer - Please read the first part of this blog post here before proceeding. It provides an overview of the Next.js application that's being built throughout this tutorial series, and it introduces developers to the Next.js framework. If you just want to jump straight into this tutorial, then clone the project repository and install the dependencies. A major feature of the Next.js framework is the number of rendering strategies it supports: Each of these rendering strategies uses a different technique for data-fetching that's required for dynamically rendered content. For example, on the client-side, upon mounting a function component, you can call the useEffect hook to perform side effects. such as data-fetching, and update the UI accordingly. Alternatively, you can use a React hook library called SWR that's built specifically for data-fetching. In Next.js, data-fetching for the other browserless rendering strategies involves exporting specific functions within a page component's file:

Disclaimer - Please read the third part of this blog post here before proceeding. It walks through image optimization in a Next.js application with the component of next/image and Blurhash, an algorithm that generates beautiful, lightweight, canvas-based placeholder images. If you just want to jump straight into this tutorial, then clone the project repository and install the dependencies. When you look at client-side routing solutions for single-page applications, such as React Router for React-based applications, you will find that they require you to define each route and manually map each one to a specific page component. With Next.js, you have a file-system based router that automatically maps each page component within the pages directory to a unique route. No extra code or routing library is needed. The route of a page is determined by the location of its page component within the pages directory. For example, if the page component is defined within the file pages/blog/index.tsx (or pages/blog.tsx ), then you can access it at the route /blog .

Disclaimer - Please read the second part of this blog post here before proceeding. It explains the different data-fetching techniques that Next.js supports, and it guides you through the process of statically rendering a Next.js application page that fetches data at build time via the getStaticProps function. If you just want to jump straight into this tutorial, then clone the project repository and install the dependencies. Slow page loading times hurt the user experience. Anytime a user waits longer than a few seconds for a page's content to appear, they usually lose their patience and close out the page in frustration. A significant contributor to slow page loading times is image sizes. The larger an image is, the longer it takes the browser to download and render it to the page. One way to improve the perceived load time of images (and by extension, page) is to initially show a placeholder image to the user. This image should occupy the same space as the intended image to prevent cumulative layout shifting . Additionally, compared to the intended image, this image should be much smaller in size (at most, several KBs) so that it loads instantaneously (within the window of the page's first contentful paint). The placeholder image can be as simple as a single, solid color (e.g., Google Images or Medium) or as advanced as a blurred representation of the image (e.g., Unsplash).