MS Office Add-in with Next.js

A modern starter template for building Microsoft Office Add-ins using Next.js, React, and TypeScript. Build powerful add-ins for Word, Excel, PowerPoint, and Outlook with the latest web technologies.

✨ Features

• ⚡ Next.js 15 - Latest App Router with React Server Components
• 🎨 Tailwind CSS - Utility-first styling out of the box
• 📝 TypeScript - Full type safety
• 🔒 HTTPS Ready - Auto-generated SSL certificates for local development
• 🧩 Office.js Integration - Pre-configured Office JavaScript API
• 📱 Taskpane & Commands - Both UI patterns included
• 🚀 Production Ready - Easy deployment to Vercel, Azure, or any hosting

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• Yarn or npm
• Microsoft Office (Word, Excel, PowerPoint, or Outlook)
  • Desktop app (Windows or Mac) OR
  • Microsoft 365 (web version)

🚀 Quick Start

1. Clone & Install

# Clone this repository
git clone https://github.com/mohit67890/msoffice-addin-nextjs.git
cd msoffice-addin-nextjs

# Install dependencies
yarn install

2. Start Development Server

yarn dev

This launches a custom HTTPS server on https://localhost:3000.

Note: On first run, you'll be prompted to trust the self-signed SSL certificate. This is required because Office add-ins must be served over HTTPS.

3. Sideload the Add-in

Launch Microsoft Word with the add-in:

yarn odev

Or manually sideload using manifest-local.xml:

• Word/Excel/PowerPoint Desktop: Insert → My Add-ins → Upload My Add-in
• Word/Excel Online: Insert → Office Add-ins → Upload My Add-in

📁 Project Structure

├── public/                 # Static assets
├── src/
│   ├── app/
│   │   ├── globals.css     # Global styles
│   │   ├── (commands)/     # Office ribbon commands
│   │   │   └── commands/
│   │   │       └── page.tsx
│   │   └── (taskpane)/     # Taskpane UI
│   │       └── taskpane/
│   │           └── page.tsx
│   ├── components/
│   │   ├── providers.tsx   # Context providers
│   │   └── ui/             # Reusable UI components
│   └── lib/
│       ├── fonts.ts        # Font configuration
│       └── utils.ts        # Utility functions
├── manifest.xml            # Production manifest
├── manifest-local.xml      # Development manifest
├── server.ts               # Custom HTTPS dev server
└── next.config.js          # Next.js configuration

🛠️ Development

Available Scripts

Command	Description
yarn dev	Start HTTPS development server
yarn odev	Start dev server + launch Word
yarn build	Build for production
yarn start	Start production server
yarn lint	Run ESLint

Working with Office.js

The Office JavaScript API is available globally. Example usage in your components:

// Check if Office is ready
Office.onReady((info) => {
  if (info.host === Office.HostType.Word) {
    // Word-specific code
  }
});

// Interact with the document
await Word.run(async (context) => {
  const body = context.document.body;
  body.insertText("Hello from Next.js!", Word.InsertLocation.end);
  await context.sync();
});

Debugging

On Mac: Enable Safari Web Inspector for debugging:

# For Word
defaults write com.microsoft.Word OfficeWebAddinDeveloperExtras -bool true

# For Excel
defaults write com.microsoft.Excel OfficeWebAddinDeveloperExtras -bool true

Then use Safari → Develop menu to inspect the add-in.

On Windows: Use Microsoft Edge DevTools or attach Visual Studio Code debugger.

Troubleshooting

Issue	Solution
Certificate errors	Delete ~/.office-addin-dev-certs and restart yarn dev
Add-in not loading	Check that manifest-local.xml URLs match your dev server
Office.js undefined	Ensure code runs after Office.onReady() resolves

🚢 Deployment

1. Deploy Your App

Deploy to any hosting platform that supports Next.js:

Vercel (Recommended):

npx vercel

Azure Static Web Apps:

# Use Azure CLI or GitHub Actions

2. Update Manifest

Edit manifest.xml and replace all localhost URLs with your production URL:

<SourceLocation DefaultValue="https://your-app.vercel.app/taskpane"/>

3. Distribute the Add-in

For your organization:

1. Go to Microsoft 365 Admin Center
2. Navigate to Settings → Integrated Apps
3. Upload your manifest.xml

For AppSource (Public): Follow the Microsoft Partner Center submission process.

🎨 Customization

Changing the Target Office App

Edit the manifest.xml to target different Office applications:

<!-- For Excel -->
<Hosts>
  <Host Name="Workbook"/>
</Hosts>

<!-- For PowerPoint -->
<Hosts>
  <Host Name="Presentation"/>
</Hosts>

<!-- For Outlook -->
<Hosts>
  <Host Name="Mailbox"/>
</Hosts>

Adding New Pages

Create new routes in src/app/(taskpane)/:

mkdir -p src/app/\(taskpane\)/settings
touch src/app/\(taskpane\)/settings/page.tsx

📚 Resources

• Office Add-ins Documentation
• Office.js API Reference
• Next.js Documentation
• Fluent UI React - Microsoft's design system (optional)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ using Next.js and Office.js