Unitools | Install in Next.js | By GeekyAnts

Steps

1. Installation - Install all the @unitools packages required.
2. Configuration - Please configure the project correctly, refer this docs
3. File Setup - Add support for .next-web.{js|ts|jsx|tsx} file extension.
4. Aliases Setup - Add aliasing of @unitools/* packages to @unitools/*-next and react-native to react-native-web.

Note

If you haven’t configured your project yet. Please refer this docs to configure for Next js.

Installation

Run the following commands to install all the packages supported under unitools.

npm

npm install @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-next @unitools/link-next @unitools/router-next @unitools/next-adapter

Yarn

yarn add @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-next @unitools/link-next @unitools/router-next @unitools/next-adapter

Add aliasing

For @unitools/image, @unitools/link, and @unitools/router to work in Next.js we need to alias it with @unitools/image-next, @unitools/link-next, and @unitools/router-next respectively

next.config.js

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@unitools/image'] = '@unitools/image-next';
    config.resolve.alias['@unitools/link'] = '@unitools/link-next';
    config.resolve.alias['@unitools/router'] = '@unitools/router-next';
    config.resolve.alias['@unitools/fonts'] = '@unitools/fonts/next';
    return config;
  },
};