Pages

Declare a Next.js page in your Mosaic module

Motivation

Next.js has a limitation on the project structure - all of the pages should be located in the pages directory. Mosaic removes this limitation, thus allowing for a modular project structure. Each Mosaic module is able to register its own pages, which will be taken into account during the build time.

Preparations

In order to declare a Next.js page, some preparations are necessary. This will work only in Next.js powered by Mosaic, launched with package @tilework/mosaic-nextjs-scripts

First of all, an extension module must be created. You will implement your page there.

For the development purposes, it's recommended to have the under-development extension module installed into your project.

Page type

The following page types are available:

• SSR: server

• Static Generation without data: static-no-data

• Static Generation with data: static-with-data

Register a page

In order to have an additional page in a Mosaic-powered Next.js application, the first step is to register this page in order to let the Mosaic build system know about the page. It should be done in the following way.

Instead of the server you may use one of the values described above.

@example/page-module/package.json

{
    "mosaic": {
        "nextPages": {
            "pagename": "server"
        }
    }
}

See the magic

A template page, similar to the following, will be generated after the actions above. For different page types, different templates will be generated. This will cause additional namespaces to be available for plugins.

Add functionality and contents to it with plugins!

server

import renderEmptyPage from '@tilework/mosaic-nextjs-scripts/lib/empty-page';

/**
 * ! This file is a "placeholder" / injection point generated,
 * ! so that the NextJS static router (and Babel plugin) would
 * ! recognize this file as a page. You can override this page
 * ! behaviour using plugin system!
 */

/** @namespace Pages/pagename/Page */
const Page = () => (
    process.env.NODE_ENV === 'production'
        ? null
        : renderEmptyPage({ ... })
);

/** @namespace Pages/pagename/getServerSideProps */
const getServerSideProps = () => ({ props: {} });

export { getServerSideProps };
export default Page;

static-no-data

import renderEmptyPage from '@tilework/mosaic-nextjs-scripts/lib/empty-page';

/**
 * ! This file is a "placeholder" / injection point generated,
 * ! so that the NextJS static router (and Babel plugin) would
 * ! recognize this file as a page. You can override this page
 * ! behaviour using plugin system!
 */

/** @namespace Pages/pagename/Page */
const Page = () => (
    process.env.NODE_ENV === 'production'
        ? null
        : renderEmptyPage({ ... })
);

export default Page;

static-with-data

import renderEmptyPage from '@tilework/mosaic-nextjs-scripts/lib/empty-page';

/**
 * ! This file is a "placeholder" / injection point generated,
 * ! so that the NextJS static router (and Babel plugin) would
 * ! recognize this file as a page. You can override this page
 * ! behaviour using plugin system!
 */

/** @namespace Pages/pagename/Page */
const Page = () => (
    process.env.NODE_ENV === 'production'
        ? null
        : renderEmptyPage({ ... })
);

/** @namespace Pages/pagename/getStaticProps */
const getStaticProps = () => ({ props: {} });

export { getStaticProps };
export default Page;

Implement the page

The code example shown below explains, how to implement the page declared above. It uses our plugin system, if you are not yet familiar to it - get acknowledged in this guide.

server

const serverSideProps = async ([context]) => ({ 
    props: { 
        sample: 'example for a server-side prop' 
    }
});

const page = ([{ sample }]) => <Typography content={sample} />;

export default {
    'Pages/pagename/getServerSideProps': {
        function: serverSideProps
    },
    'Pages/pagename/Page': {
        function: page
    }
}