A sample Office add-in project based on Next.js. This is bootstrapped with create-next-app and merged with add-in template generated from yeoman generator.

Getting Started

Dev Server

First, run the development server:

yarn dev

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

Note that the default behavior of yarn dev (next dev) is modified to launch a custom server (server.js) with office-addin-dev-certs plugin.This is because the Office add-in will not allow access without a valid HTTPS certificate.

Upon initial startup, you should be asked to confirm your self-issued certificates. Once confirmed, make sure the directory ~/.office-addin-dev-certs is created. If you have some trouble on updating app settings, try to remove this directory and re-launch app.

See Next.js custom server docs in detail.

Dev Client

Launch Word client:

yarn odev

This settings is provided with the office-addin-debugging plugin.

Tips. According to Debugging with Safari Web Inspector on a Mac, run the following command to enable debugger tool on Word:

• defaults write com.microsoft.Word OfficeWebAddinDeveloperExtras -bool true

Deploy

First, deploy some hosting server (like vercel) on this app. Check out the Next.js deployment documentation for more details.

To deliver add-in in your org, access Microsoft 365 admin center > Settings > IntegratedApps page, then upload manifest.xml with production settings. Check out the official docs(Deploy add-ins in the Microsoft 365 admin center) for more details.