Vite and Next.js for Building Faster Web Apps

In this article, you will learn how to use Vite a popular build tool with Next js to fasten the application development process. You will also learn how to configure and tweak Vite in the Next js application to experience a lightening fast development process.

What is Vite?

Vite is one of the most popular build tools that provides a faster development experience for various modern web applications. It helps to integrate lightning-fast Hot Module Replacement (HMR) strategy and optimize the build performance to a top-level by utilizing the ESBuild.

Next js together with Vite can help to achieve the following advances to your app development experience:

• The application start-up becomes blazingly fast by introducing hot reloads using HMR techniques where only those parts are refreshed which are touched during development.
• Helps to generate highly optimized static pages and management of assets for production.
• Teams can quickly scale the applications as it grows in size.

How to Start Using Vite with Next js ?

Follow these quick steps to install and configure Vite in your Next Js application:

Step 1 – Create Next Js App

Step 2 – Install Required Packages

Step 3 – Configure Application

Step 4 – Update Existing Scripts

Step 5 – Advanced Optimization Techniques

Step 1 – Create Next Js App

First of all, let’s create a new Next js application by using the create-next-app command. We will add TypeScript support for our application.

npx create-next-app@latest --typescript my-vite-nextjs-app

Now move into the application directory:

cd my-vite-nextjs-app

We have a new Next.js project with TypeScript support.

Step 2 – Install Required Packages

Next, we will install Vite and its Next.js plugin:

npm install --save-dev vite @vitejs/plugin-react-refresh

Step 3 – Configure Application

Now we will add configuration in the next.config.js file which is available at the application root. We need to add this configuration to use the Vite plugin:

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  experimental: {
    appDir: true,
  },

  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      // Fix deps that don't work with vite
      'stream': require.resolve('stream-browserify'),
      'zlib': require.resolve('browserify-zlib'),
      'util': require.resolve('util'),
    }

    // Important: return the modified config
    return config
  },
}

module.exports = nextConfig

Step 4 – Update Existing Scripts

Finally, we can replace the default Next.js build script in package.json with Vite:

// package.json

"scripts": {
-  "dev": "next dev",
-  "build": "next build",
-  "start": "next start"
+  "dev": "vite",
+  "build": "tsc && vite build",
+  "start": "vite preview"
}

Now we have a Vite-powered Next.js app. Which will represent some of the key advantages:

• Lightning-fast HMR during development
• Optimized production build with esbuild
• True server-side rendering with Next.js
• Static site generation support
• TypeScript support out of the box

Optimizing the Vite + Next.js Build

Let’s have a look at some advanced techniques to further optimize the build for production.

// next.config.js
export default {
  experimental: {
    appDir: true,
  },

  output: 'standalone',

  webpack: (config) => {
    config.output.chunkFilename = 'static/chunks/[name].js'
    return config
  },
}

// pages/index.js

import Link from 'next/link'

export default function Home() {
  return (
    <Link href="/about" prefetch={false}>
      About
    </Link>
  )
}

// components/Navbar.js

import Link from 'next/link'

function Navbar() {
  return (
    <nav>
      <Link href="/" preload>
        Home
      </Link>
      <Link href="/products">
        Products
      </Link>
    </nav>
  )
}

// vite.config.js

export default {
  build: {
    brotliSize: false,
    chunkSizeWarningLimit: 2000,
  },
}

// vite.config.js

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
      },
    },
    assetsDir: '.next/static',
  },
}

This splits vendor modules into separate chunks and outputs static assets into Next.js static folder.

5 – Type Checking

We can run the TypeScript compiler during the build to catch errors before deploying:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    sourcemap: true, 
  },
})

This builds source maps for proper error reporting. Then update the tsconfig.json to enable full type checking on build.

{
  "compilerOptions": {
    "noEmit": false
  }
}

With these optimizations, our Vite + Next.js build is as fast and efficient as possible! The app starts instantly with Hot Module Replacement, then also produces a highly optimized production build performance.

Conclusion

We have implemented Vite in our Next js app and also discussed how to implement various features in Next js to further fasten the build performance and manage resource loading techniques like:

• Multiple page loading
• Lazy-loaded resources for pages
• Prefetching and Preloading pages
• Assets management

etc.

hope this will be helpful!