Create a NextJS Application

We have specialised Starter Kits to get up and running even more quickly, but here we'll go over adding the CMS to an existing project.

First Steps...

Install Node.js

Check the NextJS website for the required version

Run the npx Command

Run the below command in your Terminal.

npx create-next-app@latest

When asked Would you like your code inside a src/ directory?

Select no – to keep consistent with this demo.

Run your App

1. Change directories to your app's directory
2. Run npm run dev to see your NextJS app!

Why NextJS?

NextJS is an industry leader React framework that makes it easy to build fast, scalable websites.

We've chosen NextJS for this tutorial since we can't cover every similar framework – but TinaCMS is compatible with Astro, Remix, and others too! 🚀

We love using NextJS for our TinaCMS projects.

• Hybrid rendering – Supports both static generation and server-side rendering.
• Performance – Automatic code splitting, image optimization, and caching.
• SEO-friendly – Pre-rendered pages help search engines index content.

Next.js works well with TinaCMS, making it easy to edit content while keeping your site fast and modern.

If you're new to NextJS or front-end web development, we recommend having a look at their beginner tutorials.