Last week was our Next.js Template Week, which we took as an opportunity to
share new open-source Next.js examples we’ve been working on.

- [Linear-like Issue Tracker](#linear-like-issue-tracker) - Draft issues with
  comments, real-time properties.
- [Tldraw Whiteboard](#tldraw-whiteboard) - Add a highly polished collaborative
  canvas to your app.
- [Notion-like AI Editor](#notion-like-ai-editor) - Create and edit
  collaborative text documents with AI.

## Linear-like Issue Tracker [#linear-like-issue-tracker]

[Linear](https://linear.app/homepage) is a polished collaborative issue tracker,
and our Linear-like Issue Tracker template highlights how to build every asset
of its collaboration. This includes collaborative editing, real-time properties,
fully-featured comments, an inbox with document switcher, live avatars, and
more.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/nextjs-template-week/linear-like-issue-tracker.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

This issue tracker template uses all four of our products in conjunction:

- [Text Editor](/text-editor) for the collaborative document editing.
- [Notifications](/notifications) to render the inbox and document switcher.
- [Comments](/comments) to display comment threads under and on the issues.
- [Sync Datastore](/sync-datastore) to create the real-time properties, labels,
  and title, with Storage.

### Get it

Try a live demo or download the project in our example gallery.

<UniversalLink href="/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker">
  <Figure highlight={false}>
    <Image
      src="/images/blog/nextjs-template-week/linear-like-issue-tracker.jpg"
      alt="Get the Linear-like Issue Tracker"
      width={1200}
      height={630}
      quality={80}
    />
  </Figure>
</UniversalLink>

## Tldraw Whiteboard [#tldraw-whiteboard]

[Tldraw](https://tldraw.dev/) is a highly-polished open-source drawing canvas
for React, designed to integrate collaboration. To enable collaboration, usually
you must host and maintain your own server, however it’s also possible to use
Liveblocks as a back end, and our new Tldraw templates show exactly how to do
this.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/nextjs-template-week/tldraw-whiteboard.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

We’ve built two different Tldraw examples, built in different ways using both
sync engines Sync Datastore provides, [Storage](/sync-datastore/storage) and
[Yjs](/sync-datastore/yjs).

We generally recommend using the Storage template as it’s a little quicker,
however if your app is already using Yjs, integrating the Yjs template makes
more sense, as your app can share its undo/redo stack with the canvas.

### Get them

Try live demos or download the projects in our example gallery.

<UniversalLink href="/examples/tldraw-whiteboard/nextjs-tldraw-whiteboard-storage">
  <Figure highlight={false}>
    <Image
      src="/images/blog/nextjs-template-week/tldraw-whiteboard.jpg"
      alt="Get the Tldraw Whiteboard"
      width={1200}
      height={630}
      quality={80}
    />
  </Figure>
</UniversalLink>

## Notion-like AI Editor [#notion-like-ai-editor]

[Notion](https://www.notion.so/product) is an AI-powered planner, and organizer
for your workspace, and our new Notion-like AI Editor demonstrates how to build
its AI and collaborative features. AI can generate styled document drafts for
you, and it also includes an AI toolbar, allowing you to simplify, expand,
translate, and change the style of selected text.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/nextjs-template-week/notion-like-ai-editor.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

This AI editor template uses of our products in conjunction:

- [Text Editor](/text-editor) for creating collaborative documents from
  AI-generated markdown.
- [Comments](/comments) to display comment threads alongside the document.
- [Notifications](/notifications) to render the inbox displaying comment
  mentions.
- [Sync Datastore](/sync-datastore), specifically Storage, to create the
  real-time title.

### Get it

Try a live demo or download the project in our example gallery.

<UniversalLink href="/examples/notion-like-ai-editor/nextjs-notion-like-ai-editor">
  <Figure highlight={false}>
    <Image
      src="/images/blog/nextjs-template-week/notion-like-ai-editor.jpg"
      alt="Get the Notion-like AI Editor"
      width={1200}
      height={630}
      quality={80}
    />
  </Figure>
</UniversalLink>

## Contributors

<Contributors gitHubUsernames={["ctnicholas"]} />