Welcome to Next.js + Cord!

Cord adds collaboration to your product in under an hour. Our SDK helps you re-imagine your app with a rich, real-time collaboration experience - in minutes, not months.

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

• Cord Docs
• Next.js Docs

This template follows the cord integration guide and adds page presence and a thread. You can add more components.

Install

From your terminal, create a next.js + cord app:

npx create-next-app@latest --example https://github.com/getcord/cord-nextjs

And then cd into the new folder.

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.

You can start editing the page by modifying app/(cord)/page.tsx. The page auto-updates as you edit the file.

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

Learn More

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!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Differences with normal next.js bootstrapped template

1. We've added a Route Group ((cord)) and moved the index page under it ((cord).page.tsx): The layout ((cord).layout.tsx) sets up collaboration for all nested routes.
2. The index route shows the page presence and a thread: two very common collaboration features.
3. We've added an Route Handler for handling our events webhooks. You want to run our own code when a message is added or a notification is added? This is where you can do it.
4. When loading the page, we randomly pick a user; having more than one user is necessary to truly showcase collaboration. You will want to replace this with your own authentication.

Getting a Cord key

Cord requires a key to operate. You can get a sample application key easily via the console in the Getting Started section.