12 Jul 2023
4 min read

Top 5 Improvements For Create-Next-App

Your Next.js app could be a lot faster

I refactored my app to use Next.js and spotted an immediate performance drop. The reason was the standard create-next-app skeleton and not knowing how Next.js works. To address that, I did numerous performance tweaks, and here are the top five that were the most important. can't stand sharing my thoughts with you.

1. Slow Rebuilds

This one doesn't affect end users but rather bothers me as a developer, so I started by optimizing a build time. In sizable projects, the rebuild time in create-next-app can be time-consuming as it tries to recompile every module during a build. To address this issue, I implemented incremental builds by configuring my webpack. Check out Webpack's guide on caching to improve your particular case this.

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'deterministic',
    splitChunks: ...
},
};

2. Dynamic imports

This technique refers to "code splitting" and "lazy loading", which should be done irregardless of the technology stack. "Dynamic imports" is an extremely powerful feature that can be easily implemented but is not showcased in the initial create-next-app skeleton.

import dynamic from 'next/dynamic'
const HeavySection = dynamic(() => import('../components/comments'))
...
  <HeavySection />

Honestly, I prefer react-lazyload library instead, but the idea is the same. Components are dynamically loaded only when they come into the viewport.

import LazyLoad from 'react-lazyload';
import HeavySection from '../components/comments'
...
  <LazyLoad offset={100}>
    <HeavySection />
  </LazyLoad>

Additionally, I moved any analytics script to be lazy loaded

import Script from 'next/script'
...
<Script src={...} strategy={'lazyOnload'}/>

3. Metatags

Metatags are crucial in rendering and optimising any web app. Many important ones are absent by default in create-next-app, so besides well-known metatags, I also added some OG tags and JSON-LD structured data:

<Head>
    ...
    <meta property="og:image"
          content={fullImageUrl}/>
    <meta property="og:url"
          content={fullUrl}/>
    <meta property="og:title" content={title}/>
    <meta property="og:type" content="article"/>
    <meta property="og:site_name" content={process.env.NEXT_PUBLIC_SITE_URL}/>
    <meta property="og:description"
          content={desc}/>
    <meta property="og:locale" content="en_GB"/>
    <link rel="canonical"
          href={checkedCanonicalUrl}/>
    <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{__html: JSON.stringify(schemaData)}}
    />
</Head>

Open Graph Meta Tags (OG) control how your page is represented when shared on social media platforms or other sites. JavaScript Object Notation for Linked Data (JSON-LD) lets you aid search engine crawlers in understanding the content, context, and relationships of the data on your web page. By the way, this is how I also managed to do 5-Star Rating in Google Search.

4. Optimizing fonts

Obviously, I was loading only specific fonts, weights, and styles, but I was able to make it even faster by:

Getting rid of webfonts-loader and self-hosting and preloading font files;
Using font subsets to reduce the size of the font file by excluding unused characters;
Swapping fonts to load a page with default fonts and dealing with layout shifts.

import localFont from 'next/font/local'

const myFont = localFont({
    subsets: ['latin'],
    src: './my-font.woff2',
    display: 'swap',
    preload: true
})

5. Next/image and CDN

And last but not least was image load optimization. I understood the benefit of next/images and refactored my app to be something like this:

<Image src={require('/public/img/logo.jpg')}
  placeholder="blur"
  alt="Mando chatbot"/>

After doing so, I realized that images were not cached with my Cloudflare CDN server anymore (btw, if you are not using Cloudflare CDN, give it another thought, as it's free and makes a huge difference in load time).

Cache not hit — The cache status should be "HIT"

I referred to this excellent article and was able to fix it.

Summary

When refactoring my app to use Next.js, I referred to Google Lighthouse and pagespeed.web.dev as affordable (free) visualizing tools that can bring significant performance issues to light.

All measurements were taken on the live instance, as Next.js gives some excellent production build improvements. Your live server might be significantly different from your localhost machine.

In general, I think that create-next-app could have been much better optimized, as many developers rely on it as a "best practice" for beginning a new project, but hopefully, you are now aware and know what to do next.

...

Join Medium with my referral link

Your membership fee directly supports me and other writers you read

medium.vladmykol.com

← Previous postBest Kotlin features I value most as Java Developer

Next post →AI State Of The Art: It Feels Like Falling Behind