Salamander

The Contento demo site, built with Next.js and Tailwind CSS.

If you’ve just signed up for a Contento account and deployed the demo site there then you will need to wait until its finished before you can continue setting up this codebase.

Getting Started

First, set up your .env file, you can copy the .env.example file as a starting point and then fill in the values.

You’ll need an API key, Site ID and Preview Secret.

Then, in the root of the project run:

npm install

You can use yarn, pnpm or bun if you prefer.

Next up, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Seeing content changes locally

Once you have everything up and running, you might want to change or add some content - try adding a new blog post and hit publish.

Now if you refresh the /blog route you may notice it doesn’t appear - this is because of the Next.js Data Cache. Next.js automatically caches the result of data requests that use fetch, which our SDK is doing in the background.

To get around this, you can just force-reload the page, or get rid of the whole cache by running rm -fr .next/cache or even opt out for a specific route.

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 the Next.js deployment documentation for more details.

Learn More

Once you’ve played around with the demo inside Contento, and had a look over this codebase you will probably want to start digging in to the docs, here are some helpful jumping off points:

• Architecture Guide - a high-level guide that outlines the different kinds of objects that you will interact with in the admin panel or API
• Content API - a read-only REST API for fetching content from Contento
• Image Optimization API - crop, resize, change the quality of your images and so much more
• JS Client & Next.js Toolkit - what we’re using in this demo project

Support

If you have a bug or feature request then please submit an issue.

If you have questions about Contento, or need help in some other way, then you can reach out to us via email or join our Discord server.

TODO

• Info page layout
• Blog post page
• Blog index page
• Blog category index page
• Refactor API calls to use new methods as they come available - array syntax
• Make sure home can be fetched by ID
• Close mobile nav on click
• SEO in Contento
• Wire up the SEO
• Make more static
• Better docs
• Pagination in index pages with new limit / offset pagination
• Deal with hero optional blocks
• Refactor data mapping in components to a middleware?