Minimal

The Minimal Starter Kit comes with a page builder template, header and footer navs and a collection of composable content blocks.

General Pages

Pages use the dynamic routing folder structure provided by Next.js. Within the app folder you will see a folder called [slug], which will provide routing for any pages after the forward slash at the end of your domain name.

For example www.mysite.com/about would map to app > [slug] > page.tsx.

The page.tsx file in app > [slug] uses the createClient helper function from your lib/contento.ts file in the page function to make a call to the API. The getContent method is then used to filter what content the API request should return.

In this case we are asking it to just return any content where the content type matches general_page with a limit of 1. So for each general_page it finds where the url structure fits with this route www.mysite.com/{slug} it will output a new <GeneralPage /> component in the html using the content data it receives back from the API.

To handle the home page you will see there is a filter within the generateStaticParams function. This function is finding all the slugs for each general_page content type and saying if the slug is “home” then don’t include it. This is because your home page would typically sit on your base domain e.g. www.mysite.com rather than www.mysite.com/home. If you wish to call your home page something else then you can update the slug it is looking for within this function.

export async function generateStaticParams() {
  return await client
    .getContent({
      params: {
        content_type: ['general_page'],
        limit: '100',
      },
    })
    .then((response: ContentAPIResponse) => {
      return response.content
        .map((content) => ({
          slug: content.slug,
        }))
        .filter((o) => o.slug !== 'home') <----- UPDATE SLUG HERE
    })
    .catch(() => {
      return []
    })
}

For each page type you have you will usually also have a corresponding page file in the components > pages folder. So for this kit, the GeneralPage.tsx file is used for General Page content objects and is where you put what you want to outputted on the front end for that content type.

<BlockMatcher />

In the Minimal Starter Kit we are outputting the <BlockMatcher /> component which allows you to choose from a variety of blocks within the General Page content type in the CMS. The component will output the blocks in whatever order you have chosen in the CMS.

This works like a page builder, and gives you flexibility to compose rich pages with any number of blocks.

You can find out more about how our <BlockMatcher /> component works here.

Blocks

The blocks available in this kit are as follows:

Button

Hero

Image

Image and Text

Text

You will find them in the components > blocks folder. This is where you should create a file for any new blocks you wish to make for your website and then add them to the BlockMatcher.tsx file.

404 page

There is a not-found.tsx file that will provide the layout for your 404 page.

Utility functions

Within the utils folder there is a file called ClassNames.ts that has a function that allows for conditional css within the className attribute of your elements or components.

You can see it in use in the header.tsx file in the components folder. Where it is being used to change the colour of the navigation link that is active.