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...

1. Install Node.js (check the NextJS website for the required version)
2. Run npx create-next-app@latest
3. When asked Would you like your code inside a src/ directory? select no – example code is assuming this
4. Change directories to your app's directory
5. 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.