Next.js

In order to integrate Mosaic into a Next.js project, the following steps should be performed

Install the dependencies

Using mosaic requires two packages in your Next.js project - the start script package and the runtime package.

yarn

yarn add @tilework/mosaic-nextjs-scripts @tilework/mosaic

npm

Use the new scripts

Replace next invocations in the scripts block of your package.json. Such way, Next.js will be launched with additional configurations (Webpack and Babel) required for Mosaic.

package.json

{
    "scripts": {
-        "dev": "next",
+        "dev": "nextjs-scripts dev",
-        "build": "next build",
+        "build": "nextjs-scripts build",
-        "start": "next start",
+        "start": "nextjs-scripts start",
               
+        "link": "nextjs-scripts link",
+        "test": "nextjs-scripts test"  
    }
}

Clean up

next is a dependency of mosaic-nextjs-scripts, thus is no longer needed in your project as a direct dependency. It is advised to remove this redundant dependency.

yarn

yarn remove next

npm