ReactJS

Next.js and React.js: 5 Differences to Help You Make Your Choice

Mar 1, 2022

4 min read

I should start by saying that I'm not a fulltime React.js or NextJS dev. My main technology is Angular, and I have been using it since I started coding in 2016.

But I am enthusiastic about how other frameworks and libraries work. So with that being said, I tried out some courses over the past few months, and this is why I prefer Next.js over React.js.

Automatic Code Splitting

Of course, you can perform this by lazy loading some components on React, but in NextJS it comes out of the box.

We just need to run npm run build, and the engine will create the proper files just to load those components.

➜ npm run build

> test-blog@0.1.0 build /Users/daianscuarissi/repos/test-blog
> next build

info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      5.56 kB        76.5 kB
├   └ css/149b18973e5508c7.css             655 B
├   /_app                                  0 B            70.9 kB
├ ○ /404                                   194 B          71.1 kB
└ λ /api/hello                             0 B            70.9 kB
+ First Load JS shared by all              70.9 kB
  ├ chunks/framework-e70c6273bfe3f237.js   42 kB
  ├ chunks/main-a054bbf31fb90f6a.js        27.6 kB
  ├ chunks/pages/_app-ca6aae25bc99a05f.js  491 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/27d177a30947857b.css               194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

And is really cool because we don't need to add extra-code to make this happen. We don't need to configure anything else to deliver what the user needs to see that page. Awesome.

Image Optimization

The thing I love most about NextJS is Next/Image. If you ever work with images in web development, you probably know you need some configuration to lazy load the images. Well, simmilar when code-splitting in NextJS, you only need to use:

  import Image from 'next/image'

Some of the benefits that are mentioned in the documentation include:

Improved Performance
Visual Stability: Prevent Cumulative Layout Shift automatically
Faster Page Loads
Asset Flexibility

This sounds really awesome, but what about using it in a real project?

Another cool feature is you can use this for external or internal images. (If you are using external images, you need to configure the domains for each image. But it seems to be a good method for optimizing configuration.)

  import Image from 'next/image'

  export default function Home() {
    return (
      <>
        <h1>My Homepage</h1>
        <Image
          src="/me.png"
          alt="Picture of the author"
          width={500}
          height={500}
        />
        <p>Welcome to my homepage!</p>
      </>
    )
  }

BONUS:

Recently, I discovered that you can use the flag priority, and then NextJS will try to prioritize the image for loading (e.g. through preload tags or priority hints), leading to a meaningful boost in Largest Contentful Paint.

  import Image from 'next/image'

  export default function Home() {
    return (
      <>
        <h1>My Homepage</h1>
        <Image
          src="/me.png"
          alt="Picture of the author"
          width={500}
          height={500}
          priority
        />
        <p>Welcome to my homepage!</p>
      </>
    )
  }

Many ways to generate the site

NextJS can perform multiple server rendering strategies from a single project, which I was impressed with when I used it for the first time.

Static Generation (SSG)

Basically, using this approach, we render all pages at build time.

Every component can implement a method called getStaticProps() through which we can fetch data from a DDBB, and then return it as props to the component and use it there.

These can be mixed to serve your site through a CDN where it can be stored in cache. This works pretty well if you are building a blog, or just a static site, where the data doesn't change often.

  export async function getStaticProps() {
    const res = await fetch('https://...');
    const data = await res.json();

    return { props: { data } };
  }

Server-side Rendenring (SSR)

What if our data changes often? Well, in that case, you can use this approach, which builds the HTML page at request time every time it is requested by the user.

In the component, we can use the method getServerSideProps() and then pass as props to the component. So the difference with SSG is every time the user enters the page, the backend fetches the latest, and returns that to the page.

  export async function getServerSideProps() {
    const res = await fetch('https://...');
    const data = await res.json();

    return { props: { data } };
  }

Incremental Static Generation (ISG)

This feature allows the regeneration of static pages during runtime. It's a hybrid solution of SSR and SSR.

The page is generated on the first request. Unlike in SSR, where the visitor has to wait for the data fetching, a fallback page is served immediately.

During the fallback stage, we can present placeholders and a skeleton page until everything is resolved. Skeleton pages are a common pattern that you can see almost everywhere.

Once the data is resolved, the final page is cached, and visitors will receive the cached version immediately, just like with SSG. We can also set when Next.js should re-validate the page and update it.

  export async function getStaticProps() {
    const res = await fetch('https://...');
    const data = await res.json();

    return { props: { data }, revalidate: 60 };
  }

Routing

In other frameworks like Angular or React, we need to define the routes in order to serve certain files, components, etc. In Angular, these routes are defined in modules, and in React, we can use react-router.

But, again in NextJS, we have support for routes out of the box, we just need to create a file with extension .js, .jsx, .ts, .tsx under pages folder:

  next-app
  ├── node_modules
  ├── pages
  │   ├── index.js // path: base-url (/)
  │   ├── books.jsx // path: /books
  │   └── book.ts // path: /book
  ├── public
  ├── styles
  ├── .gitignore
  ├── package.json
  └── README.md

But what about dynamic or nested routes? Yes, these are supported, again, out of the box.

  pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
  pages/[username]/settings.js → /:username/settings (/foo/settings)
  pages/post/[...all].js → /post/* (/post/2020/id/title)

API Routing

Another feature I really enjoy using was the API Routing.

Any file inside the folder pages/api is mapped to /api/, and will be treated as an API endpoint instead of a page. They are server-side only bundles, and won't increase your client-side bundle size.

For example, the following API route pages/api/user.js returns a json response with a status code of 200:

  export default function handler(req, res) {
    res.status(200).json({ name: 'John Doe' })
  }

And, if you already have an API, NextJS already can work with that. According to NextJS docs:

Masking the URL of an external service (e.g. /api/secret instead of https://company.com/secret-url)
Using Environment Variables on the server to securely access external services.

BONUS 🔥:

On-demand Incremental Static Regeneration (Beta)

This feature was recently included in the last update from the Vercel Team.

According to the team, we can now use a method called unstable_revalidate(), allowing developers to revalidate individual pages that use getStaticProps.

  // pages/api/revalidate.js
  export default async function handler(req, res) {
    // Check for secret to confirm this is a valid request
    if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
      return res.status(401).json({ message: 'Invalid token' })
    }

    try {
      await res.unstable_revalidate('/path-to-revalidate')
      return res.json({ revalidated: true })
    } catch (err) {
      // If there was an error, Next.js will continue
      // to show the last successfully generated page
      return res.status(500).send('Error revalidating')
    }
  }

This makes it easier to update your site when:

Content from your headless CMS is created or updated
Ecommerce metadata changes (price, description, category, reviews, etc.)

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Daian Scuarissi

@asdaian @SDaian

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes Introduction: Next.js, a powerful React framework, offers two essential features - Parallel Routes and Intercepting Routes - that enable developers to create highly dynamic and seamless user experiences in their applications. In this blog post, we will explore both Parallel Routes and Intercepting Routes, highlighting their functionalities, use cases, and how they can be combined to enhance application routing. What are Parallel Routes? Parallel Routes in Next.js allow the rendering of multiple pages within a shared layout. Rather than navigating to a completely separate page, Parallel Routes enable the simultaneous rendering of different pages based on certain conditions such as user roles or tab navigation. By leveraging named slots, defined using the @folder convention, multiple pages can be seamlessly integrated into a single layout, enhancing user experience and reducing code duplication. How to Use Parallel Routes: To utilize Parallel Routes in Next.js, you must define named slots for the desired pages within your application's folder structure. These slots are then passed as props to a shared parent layout component. For example, consider a social networking application where two pages, feed and notifications, must be rendered within a common layout. You can define Parallel Routes using the following structure: ` The layout component in app/layout.js will accept the @feed and @notifications slots as props and render them alongside the children prop. Here's an example of the layout component: ` It's important to note that slots do not affect the URL structure and are not considered route segments. This means the URL would be /mypage/@feed/views for a route like /mypage/views since @feed is a slot. Also, to prevent the application from rendering nothing or throwing an error, we could use the default.tsx file: ` In this example, the default.tsx file specifies the default content (or fallback) to render when none of the named slots match the current route. It acts as a catch-all for routes without a corresponding slot. Some Use Cases: *Conditional Routes:* Parallel Routes can conditionally render routes based on certain conditions, such as user roles. For example, you can render a different dashboard page for admins and users. This can be achieved by creating a layout component specific to the dashboard and checking the user role to determine which slot to render. *Tab Groups:* You can utilize Parallel Routes to create tabbed navigation within a section. This is especially useful for analytics or multi-page views. Adding a layout inside a slot allows users to navigate between different pages within that slot independently. *Loading and Error UI:* Parallel Routes can be independently streamed, allowing you to define custom error and loading states for each route. This enables better control over the user experience by providing distinct feedback for different app sections. *Modals:* Parallel Routes can be combined with Intercepting Routes to create modals with shareable URLs, preserved context on refresh, and customized navigation behavior. By intercepting certain routes and rendering them within a modal component, you can create a seamless modal experience. Understanding Intercepting Routes: Intercepting Routes in Next.js allows you to load content from another route within the current layout without changing the URL or refreshing the page. Using the (..) Convention: Intercepting routes are defined using the (..) convention, which is similar to the relative path convention ../ but for route segments. The convention allows for matching segments on the same level (.), one level above (..), two levels above (..)(..), or from the root app directory (...). For example, to intercept the photo segment from within the feed segment, you can create a (..)photo directory. Integrating Intercepting Routes with Parallel Routes - Modals: One powerful use case for Intercepting Routes is creating modals, which can be combined with Parallel Routes to solve common challenges such as making the modal content shareable through a URL, preserving context on page refresh, and handling backward and forward navigation. Let's make an example: ` Our folder structure will be: In this example, when a user clicks on a photo within the /gallery page, the route /photo/:photoId will be intercepted and rendered within the (..)photo directory, overlaying the gallery content. This means that the photo route is only one segment level higher despite being two file-system levels higher. In the example above, the path to the photo segment can use the (..) matcher since @modal is a slot and not a segment. Common Use Cases - Beyond Modals: Intercepting Routes can also be utilized in other scenarios. Some examples include opening a login modal in a top navbar while having a dedicated /login page, or opening a shopping cart in a side modal for better accessibility or creating wizards or multi-step forms within a single page. The possibilities are endless. Conclusion Next.js Parallel and Intercepting Routes offer powerful methods for enhancing the routing capabilities of your applications. With Parallel Routes, multiple pages can be seamlessly integrated within a shared layout, simplifying navigation and enhancing user experience. By incorporating Intercepting Routes, you can create dynamic overlays like modals, enabling content from different routes to be displayed within the current layout. By leveraging these features, you can unlock exciting possibilities and take your Next.js applications to new heights of user engagement....

Apr 5, 2024

3 mins

NextJSJavaScript

CSS Hooks: A new way to style your React apps

In the world of web development, the management of styles has always been a crucial aspect of building modern and responsive user interfaces. With the rise of CSS in JS libraries like Material UI and Chakra, developers have started creating dynamic and reusable styles using JavaScript; however, the performance implications of these libraries have led to the exploration of alternative solutions. One such solution is CSS Hooks, a library that offers a different approach to managing styles in web applications. The Problem with CSS in React and CSS in JS Libraries In React applications, you typically write styles directly with the style prop by applying classes with className, or if you’re using a framework like Material UI or Chakra then you may use the sx attribute, which is more powerful than the baseline attributes. There are some performance concerns in the case of the sx attribute specifically. The framework has to dynamically generate classes with your styles and apply them to the document whenever it is used. This can become an issue with large and complex applications as your styles will be regularly regenerated on the fly as the user navigates through the application. This has led developers to seek alternative solutions that offer similar flexibility but with better performance. Introduction to CSS Hooks CSS Hooks improve upon the aforementioned issues by pre-generating your CSS using configuration hooks. The styles that these hooks generate remain static during the lifetime of the application and are reused wherever possible. CSS variables are utilized under the hood whenever dynamic behavior is needed. By dynamic behavior, I’m referring to advanced CSS features such as pseudo-class selectors and media queries, which are both traditionally unavailable for use with inline styles. CSS Hooks utilize an interesting trick under the hood to accomplish this, which we will now explore. The Power of CSS Variables and the Fallback Trick As mentioned before, CSS variables are utilized in order to support using advanced dynamic behavior such as pseudo-selectors in our inline styles. CSS variables are core to something known as the “fallback trick”. The gist of how the fallback trick works is to have the pseudo-selector or media query toggle the state of a variable between initial and an empty invalid value, and then we put the value that we actually want to toggle as the “fallback” value in the reference to the CSS variable inside of the inline style itself. Changing this fallback value inside of an inline style essentially allows us to control the values used by the pseudo-selector without having to regenerate linked stylesheets as we only have to change the inline style attribute. This is best explained with an example: ` This plain HTML and CSS code effectively allows us to utilize the focus pseudo-selector on any element that we want using inline styles only. This is what CSS Hooks effectively does in the background when you use dynamic styles. No nasty re-renders and mucking with stylesheets needed! How to use CSS Hooks Now that we know how CSS Hooks fundamentally work, let’s try using them. The library itself is much easier to use than the aforementioned example. Installation and usage of CSS Hooks is easy. Firstly, we must install the @css-hooks/react package into a React project with the package manager of your choice (npm, pnpm yarn, etc). Once that’s done, all that’s left is a little bit of configuration. You have to first use a utility function called createHooks that is exported from the package we just installed. The result of that function returns a couple of variables in an array that can be deconstructed, the first being a stylesheet in the form of a string, and the second being a function. ` I recommend putting this in a separate file that can be imported from multiple other places in the project as this is where we will be configuring hooks across the project. We’re exporting both hooks and css, and both are important. We need to include hooks into the DOM as it contains the styles of the hooks that we’ll be referencing in our components. In your root component you need to add the following tag so that the generated CSS can be used. ` How this is done may vary based on the libraries that you are using. After that’s done, you can integrate CSS Hooks into your components while writing inline styles mostly just like you would do normally, with the only change being the addition of an additional call to the css function that we exported earlier: ` Now that the core boilerplate is set up, your components can now utilize CSS Hooks in theory; however we need to actually add some hooks to start with before we can use them, or else we’ll just be limited to basic styles in the same way that React inline styles are. Make your own hooks We can define our hooks inside of the css-hooks file that we created earlier, the same one that exports the css helper function that gets CSS Hooks working with our components. Hooks are defined in the options parameters that are currently empty. Defining a simple hook that allows us to define inline hover styles for a component is very easy and can be done as follows: ` Although both the key and the value in this example are the same, they both serve different purposes. The key is the name of the hook that we reference when we want to use it, while the value is the spec. The spec is the actual CSS selector that we’re writing. The name can be anything that you want it to be so long as it doesn’t clash with any existing style properties or hooks. Recommended hooks Although making your own hooks may be necessary at times, there is another repository provided by the CSS Hooks authors that adds a way to generate many useful hooks called @css-hooks/recommended. I highly recommend using this library to generate your hooks if at all possible, and the usage is pretty simple. Here’s an example showing how you can use it to generate media queries, color scheme specific styles and pseudo-selectors: ` Then with that done, these can be utilized as follows: ` We can also modify the hooks configuration to add our own hooks in addition to the recommended hooks by using the spread operator: ` Then that custom hook can be used by simply using its key name: ` Summary CSS Hooks offers a performant alternative to traditional CSS in JS libraries by leveraging CSS variables and providing a unique approach to managing styles in web applications. By pre-generating the stylesheet based on configured hooks and utilizing CSS Variables for dynamic behavior, developers can create reusable styles without the performance overhead associated with dynamic stylesheet generation. If you're interested in exploring CSS Hooks further, be sure to check out @CSSHooks for more information. You can also find some of the examples demonstrated here in a working app in our demos repository. Thank you for reading!...

Feb 28, 2024

5 mins

CSSReact

How to Choose Between Data Fetching Options in Next.js

A few days ago, we published another blog post related to Next.js: Understanding Next.js Data Fetching for Beginners. In that blog post, we show the functions this framework provides us to perform different data fetching options. I hope you already have a basic understanding of Next.js. If not, I highly recommend that you first read the article linked above. Let's get started. There are multiple strategies for us to choose from, and it gets confusing at first to apply the correct solution in the correct place. We will take a real-life application, and understand which strategy works best for which scenarios. The special functions that are used for pre-rendering in Next.js are: - getStaticProps - getStaticPaths - getServerSideProps We will see in which scenarios you can apply these functions, and learn the best practices for doing so. We are talking about an Online Store Let's assume that we want to build an Online Store to display some products, a product page (and details), and an accounts page (order details, personal info, etc). Let's also assume that we don't want to use React because we want to optimize SEO. Let's start thinking about this. Landing Page (getStaticProps) The landing of our OnlineStore is where you can see two things, the list of some products you want to highlight could be: - Featured Products - Popular products - Discounted Products - Upcoming Products Whatever the case, the main thing is you already know which API you will be using, and probably that API will not change in the short term. In these scenarios, only getStaticProps is enough. As we see in our previous post: ` Now, our landing page will be pre-generated ahead of time and won't change. For further details and a breakdown of the getStaticProps method let's check our previous post getStaticProps. Landing Page, but dynamic (getStaticProps + revalidate). What happens if the landing page you are building is frequently changing the products based on user preferences? Then, you don't want to show the same page all the time. In that case, you need to make sure that the generated pages will be updated at a regular interval. With that in mind, you have to use the revalidate property. This property is defined in seconds to indicate the refresh interval. ` We gave our revalidate property the value of 20. It means we are still pre-generating our landing page, but it will be updated every 10 seconds. As we see in our previous post, this is called Incremental Static Regeneration. Product detail (getStaticPaths) Now, if for example, our customers click on one product, we have to show a details page of the product. We're calling a PI, like the product/?id=678. What is interesting here, is we don't know which id we are looking for. So our server needs to know all of the valid ids ahead of time. This is where getStaticPaths comes in. It tells the server all the available routes that we need to pre-generate. ` Now, only the pages with a valid id will be pre-generated. Accounts Details (getServerSideProps) Now, what if our customer wants to see her last purchases, or change her address or other personal info? After that, we need to validate some things. Or, we want to make sure that the user has the right permissions to view the page. In these scenarios, we use getServerSideProps. If you remember, in our previous post we talk about getServerSideProps, this option will not pre-generate any page. Instead, it will run the code inside the method every time the page is requested. Therefore this is more secure, but unfortunately less efficient. ` Conclusion That's it. First, we saw different data-fetching options. Now, we see how to choose between them, in real-life scenarios probably we are facing every day. Now you should have a little understanding of how we can use NextJS for improved performance and SEO-Friendly in your application. So far, we learned: - If we had a page in which the content will be the same and will remain the same for a long time, it's better to use getStaticProps. - If we need a page whose content will be dynamic based on some conditions, it's better to use getStaticProps with a revalidating option. - On the other hand, if we want to build a page and be sure that the id items are all valid, it's more likely to use getStaticPaths. - But, if we need to make a secure but dynamic page, we will definitely need getServerSideProps....

May 18, 2022

4 mins

NextJSReactJavaScript

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

Rob Ocel and Jerome Hardaway continue their series on AI adoption by exploring the world of AI, focusing on small language models (SLMs) and large language models (LLMs). They compare the unique capabilities of SLMs against the vast knowledge encompassed by LLMs, and highlight the transformative potential of AI in driving creativity, problem-solving, and user-centric design in technology. SLMs are designed to excel at specific tasks, offering faster processing and cost-effectiveness due to their open-source nature. These models have proven to be invaluable in sectors like finance, where data security is of utmost importance. By leveraging SLMs, organizations can enhance their security measures and protect sensitive information. Moreover, SLMs provide a stepping stone for engineers to adapt to new technologies and incorporate AI into their work, ultimately improving user experiences. On the other hand, LLMs encompass a wide range of knowledge, making them incredibly versatile. These models have the potential to transform industries by providing insights, predictions, and solutions to complex problems. With advancements in AI chip technology by tech giants like Apple, Nvidia, Google, and Meta, LLMs are becoming even more powerful and efficient. Evaluating AI models based on factors like stability and industry support is crucial to harnessing the full potential of LLMs. The conversation also addresses some ethical questions related to AI implementation. While AI brings numerous benefits, concerns about job displacement cannot be ignored. As AI continues to evolve, it is essential to strike a balance between automation and human involvement. Engineers must focus on improving AI sophistication and seamless integration into user interactions, ensuring that AI enhances human capabilities rather than replacing them. Additionally, ethical guidelines and regulations must be established to address potential biases and ensure responsible AI implementation. Download this episode here....

Apr 23, 2024

2 mins

Engineering Leadership

Next.js and React.js: 5 Differences to Help You Make Your Choice

Automatic Code Splitting

Image Optimization

Many ways to generate the site

Routing

API Routing

On-demand Incremental Static Regeneration (Beta)

Daian Scuarissi

You might also like

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

CSS Hooks: A new way to style your React apps

How to Choose Between Data Fetching Options in Next.js

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

You might also like

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

CSS Hooks: A new way to style your React apps

How to Choose Between Data Fetching Options in Next.js

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel