Search for a command to run...
Series
This will be a series of posts were I setup a simple brochure site in Next.js driven by the Netlify CMS.
Intro I'm using Netlify CMS & Next.js at work to create our website. I thought I'd document the process in case its useful for others. This will be a series of posts were I'll setup a simple brochure site driven by the Netlify CMS. The resulting so...
Next.js Setup Well setup Next.js using Typescript , ESLint , Prettier and Tailwind CSS. Run the following commands to create a blank next.js project and test its working: yarn create next-app client-cms cd client-cms yarn dev You should see s...
We're going to be using markdown to create our pages so lets add a markdown loader: yarn add frontmatter-markdown-loader -D Add markdown content Create a content folder and some sample content: filename: content/index.md --- header: title: Softwa...
The default method of integrating Netlify CMS with Next.js is not super flexible so lets use an alternative method... We want custom previews so lets use netlify-cms-app. NOTE: If you're not interested in custom previews take a look at the standard N...
We're finally ready to deploy our site to Netlify! Netlify.toml Make a file at the top level of your directory called netlify.toml, and fill it with: [build] command = "npm run build && npm run export" publish = "out" The command here is referrin...
We can now edit data using Netlify CMS, while its functional I'm sure you'll agree its not exactly pretty! Lets add some Tailwind CSS to show a Navbar and a Hero section with a custom preview so it looks as if we're editing the actual page when we'r...
