Its primary goal of this repo is to provide a simple Next JS application (using App Routes) along with an example Azure Dev Ops pipeline and GitHub action to provide ability to deploy the app to an Azure Static Web App. See Deploy on Azure Static Web Apps for instructions on deployments.

It also includes:

• Unit tests using React Testing Library
• Storybook Storybook

Table of Contents

• The Next.js App
  • Getting Started
  • Structure
  • Unit Tests
  • Storybook
• Deploy on Azure Static Web Apps
• Learn More About Next.js

The Next.js App

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Styling

This app leverages PostCSS and Tailwind. There are the beginnings of a theme in src/styles/globals.css

Structure

📦 ┣ 📂 docs (assets referenced by this readme) ┣ 📂 src ┃ ┣ 📂 app ┃ ┃ ┣ 📂 components (contains page-specific and shared components) ┃ ┃ ┃ ┣ 📂 shared (shared components) ┃ ┣ 📂 hooks (contains React hooks for reusable functionality) ┃ ┣ 📂 images (contains pngs etc) ┃ ┣ 📂 styles (contains CSS files) ┃ ┣ 📂 types (TS types)

Unit Tests

Component tests using React Testing Library and Jest sit next to the corresponding component file, e.g. Spinner.test.tsx.

Unit tests can be run using npm run test and are also ran as part of the CI/CD pipeline.

Storybook

This app includes Storybook to provide a component library, presenting each component along with documentation outside of any business logic or context.

"Storybook is packaged as a small, development-only, workshop that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases."

Each component is described by a 'story' which displays the component and its variations/states. For example Spinner.stories.ts sits next to the Spinner.tsx component file in the folder structure. You can view the Storybook component library by running npm run storybook and browsing the library at http://localhost:6006/.

Deploy on Azure Static Web Apps

Deploying the app is simple, firstly create a new Azure Static Web App - see https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github

As this repo includes a working GitHub action and ADO pipeline you can skip the repository integration step and choose 'Other'

In order to allow either the ADO pipeline, or the GitHub action to connect to your new app you will need to acquire the deployment token and add it as a variable.

• if wish to use the GitHub Action then you will need to add the deployment token as a repository secret called AZURE_STATIC_WEB_APPS_API_TOKEN
• if you wish to use the Azure DevOps pipeline then you will need to add the deployment token as a variable called AZURE_STATIC_WEB_APPS_API_TOKEN in a variable group named 'ui-variables'
• an optional BUILD_VERSION can be added, mapped to the $(Build.BuildNumber) variable. This will be rendered on the /config page on the app to help inform the user as to what version of the app has been deployed.

Learn More About Next.js

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.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!