MUX + Next.js React Template

A Next.js + React starter template for MUX.

Overview

This is a Manulife starter template for React using Next.js, bootstrapped with create-next-app and MUX component library.

Artifactory

To use this template, your global NPM registry needs to point to Artifactory - either the Canadian or the Global instance (depending on your BU). You can accomplish this with either an .npmrc file in your user's global folder (C:\Users\<YourID> or /Users/<YourID>) or running the following command:

npm config set registry https://artifactory.manulife.ca/artifactory/api/npm/npm/
# or
npm config set registry https://artifactory.platform.manulife.io/artifactory/api/npm/npm/

Usage

To use this template as the base of your project, clone it using git:

git clone git@github.com:manulife-innersource/mux-next-template.git <project-name>
cd <project-name>

Then make it your own:

rm -rf .git && git init && npm init
git add .
git commit -m "Initial commit"

Install dependencies:

npm install

Now, you can run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Next.js App Router

Next.js 13 introduced a new App Router, which became stable in version 13.4 and is now the default when creating a new Next.js app with create-next-app.

App Router uses React Server Components by default, which don't support styled-components and other CSS-in-JS libraries that require runtime JavaScript. Given this limitation, MUX components can only function as Client Components at this time. As of release v3.4 all MUX components are exported as Client Components.

Please see the Next.js Framework Guide in MUX Docs for more details and known limitations.

Import Aliases

Import alias for src is setup by default. That means if you have a component in src/components/Foo.js, you can write import statements like this:

import Foo from 'src/components/Foo';

instead of:

import Foo from '../../../components/Foo';

...anywhere in the project! This makes for much cleaner code readability, and works well with the simple-import-sort ESLint plugin.

If you'd like to change or add aliases, you'll need to modify .eslintrc and jsconfig.json files accordingly. See eslint-import-resolver-custom-alias and Next.js docs for more details.

Styled Components

Styled Components are enabled via Next.js Compiler, in order for MUX to work out-of-the-box.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

To learn more about MUX, please see the official MUX Docs.