Update of this Portfolio Blog Next.js App

I launched this portfolio blog website this year, to document some of the things that I have been working on. It comprises of:

• duncanwhite.co.uk, Next.js front-end application with Typescript and Tailwind.
• npm package component library.
• storybook.duncanwhite.co.uk demonstrating the reusable components.
• strapi.duncanwhite.co.uk, Strapi CMS to serve data, such as this blog post.

Recent additions to the site include:

• Developing an npm package
• Converting all api calls to server side
• Adding spinners using the Suspense component
• Adding pagination
• Running in Production Mode

Developing an npm package

I created and published an npm package with my components to the npm registry, as an example of decoupling reusable components from an application. This Next.js app installs the npm package and uses the components as you would any third party library. This library is publicly available to any other Next.js developers that would like to use the components.

I have set up the npm package with the Next.js flavour of Storybook, a powerful front-end workshop. This allows local development of the components agnostically from the consuming application. I have deployed Storybook as a living documentation to demonstrate the components that I have added so far: storybook.duncanwhite.co.uk.

When developing locally it was necessary before publishing to install and try the components with my app. For this I used Yalc, which allows you to make a local link between your npm package and your application without having to publish the package to the npm registry.

Converting all api calls to server side

I have converted all of the components that contain api calls to the Strapi CMS to be server side components. Here is an example of the difference in the code:

React:

Next.js

*fetchData is a custom function to connect to the Strapi api.

The Next.js code is much more concise, and although you can get a lot of manual control using React useState hook to give feedback on the loading progress, instead this can be achieved using the powerful Next.js Suspense component!

Adding spinners using the Suspense component

The Suspense component can be manually wrapped around any component to give maximum control over loading states:

Another more general approach is to create a loading.(jsx/tsx) file, then a <Suspense> component will be nested inside the layout file in the same folder. It will automatically wrap the page file and any children below in a <Suspense> boundary, with the component in the loading file as the fallback. These fallback components can be anything from text, a spinner to a skeleton UI.

I installed and used the React Spinners npm package for a professional looking Spinner to use with my app.

Using the react spinners was a good reminder of when to use and not use server components! Due to its functionality relying on server side javascript, this was required to be a client component, and so must include the 'use client' directive at the top of the component file.

Adding pagination

I have added pagination to work with Next.js app and the api calls to the Strapi CMS. Ths was simply a case of using the page number route parameter and passing it through in the query string with the request from the frontend:

Running in Production Mode

This Next.js app runs on a VPS server, using PM2 a process manager to keep the application alive forever.

When I first set this process up, I used the start command for the app on the server. This resulted in slow loading of the links, due to lack of optimisations such as the link prefetching.

Now that the application is built in advance with the run build command, and then run on the server using the serve command, it is now a super fast optimised production version of the application!