mosaic
  • Overview
  • Integration
    • Next.js
    • Create React App
    • Webpack
  • Getting started
    • Extensions
    • Themes
  • Tutorials
    • Mosaic + React
    • Mosaic + Webpack
  • Install an extension
    • Install a local extension
    • Install with a package manager
    • Enable or disable an extension
  • Develop an extension
    • Anatomy of an extension
    • Namespaces
    • Runtime plugins
    • Build configuration plugins
  • CRA features
    • CRACO plugins
  • Next.js features
    • Styles
    • Pages
    • Common props
  • Architecture examples
    • Router
  • Themes
    • Parent theme system
    • File shadowing
  • Experimental
    • Module preferences
    • File provisioning
  • in-depth
    • How does it work?
Powered by GitBook
On this page

Was this helpful?

  1. Integration

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 add @tilework/mosaic-nextjs-scripts @tilework/mosaic
npm install @tilework/mosaic-nextjs-scripts @tilework/mosaic

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 remove next
npm uninstall next

PreviousOverviewNextCreate React App

Last updated 4 years ago

Was this helpful?