Setting up the dev repository

As I used my first day to learn about Next.js, the second day we decided to start development. To set up a Next.js app we will first check out if your development environment is ready. If you don’t have Node.js installed, install it from here. Secondly, a text editor such as VS code is needed.

Create a Next.js app

To create a Next.js app first move into the directory, you would like to create the app in, and run the following command -

npx create-next-app@latest {insert-app-name}

The ‘create-next-app’ bootstraps a Next.js app for you and you will see a directory created in the name of your app. The name of my app would be ‘microservices catalog’.

Run the development server

After moving into the ‘microservices catalog’ app directory, we can use

npm i
npm run dev

This starts your Next.js app’s “development server” (more on this later) on port 3000. To check if it’s working, open http://localhost:3000 in your browser. It would open a starter page with some helpful Next.js information on it.

Installing and Configuring PatternFly

For the design system, we decided to work with PatternFly. As stated in the official documentation, PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences.

Using npm, run the following command to install:

npm install @patternfly/react-core --save

OR

Using yarn, run the following command to install:

yarn add @patternfly/react-core

Using PatternFly we cannot directly use the React components in Next.js, instead use the HTML and CSS classes. You will see the use-case in the next blog.

References

https://www.patternfly.org/v4/get-started/about