# Updated Next.js integration: now App Router compatible

[date: 2023-06-28T13:14:43.524+02:00]

We are happy to announce the latest update to our integration resources and packages for Next.js!

Our team has been hard at work to enhance your developer experience and provide **seamless integration with the new** [**Next.js App Router**](https://nextjs.org/blog/next-13#new-app-directory-beta) (introduced in Next 13, and marked as stable from v13.4).

#### What's new?

**Integration Resources** — We have revamped our [integration documentation](https://www.datocms.com/docs/next-js.md) to provide you with comprehensive guidance and support for the new App Router. Whether you are new to Next.js or an experienced developer, you'll find everything you need to seamlessly integrate your applications with Next.js.

Our updated documentation covers key topics, best practices, and step-by-step instructions, making it easier than ever to get started.

**Starter Projects** — As part of this update, we have also upgraded our [Blog](https://www.datocms.com/marketplace/starters/nextjs-template-blog.md) starter to run on Next 13, and released a new Photography Website starter. Both serve as a starting point for your Next.js projects, with built-in compatibility for App Router.

The [Blog starter](https://www.datocms.com/marketplace/starters/nextjs-template-blog.md) in particular offers the [Web Previews](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews.md) and SEO/Readability Analysis plugins already pre-installed and configured, as well as a fully functioning Draft Mode for editors, with [real-time previews of draft content](https://www.datocms.com/docs/next-js/real-time-updates.md#draft-mode--usequerysubscription).

**Updated** **`react-datocms`** **npm Package** — The latest version of our popular [React integration toolkit](https://github.com/datocms/react-datocms) has been optimized to work seamlessly with Server Components, and introduces [a new helper](https://github.com/datocms/react-datocms/blob/master/docs/meta-tags.md#tonextmetadata) specifically designed for the new [Metadata API](https://nextjs.org/docs/app/building-your-application/optimizing/metadata).

By upgrading to the latest version, you can enjoy a smooth developer experience with Next 13+, while leveraging the usual powerful capabilities of DatoCMS in your projects.

#### Onwards!

We are committed to continuously improving our tools and resources to make your development process **smoother, more efficient, and enjoyable.** These updates are designed to provide you with maximum flexibility, allowing you to leverage the benefits of App Router seamlessly within your Next.js applications.

To explore the updated integration resources and get started with the new project starter template and `react-datocms` package, head over to our [documentation website](https://www.datocms.com/docs/next-js.md).