Developer Portfolio built with Next.js and Cosmic

To build this app, we’re going to use the following technologies:

• Next.js - A React framework for production that makes it easy to spin up a full-stack application.
• Cosmic - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage template content.
• Tailwind CSS - A performant utility-first CSS framework that can be composed directly in your markup.

Links

• Read how the template was built
• Install the template
• View the live demo

Getting started

Environment Variables

You'll need to create an .env file in the root of the project. Log in to Cosmic and from Bucket Settings > API Access take the following values:

//.env
COSMIC_BUCKET_SLUG=your_cosmic_slug
COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_PREVIEW_SECRET=your_preview_secret

Install the dependencies by running one of the following commands:

pnpm install
# or
yarn
# or
npm install

Then run the development server:

pnpm dev
# or
yarn dev
# or
npm run dev

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Previewing Unpublished Content

This template supports Next.js Draft Mode, allowing you to preview unpublished blog posts and works pages from the Cosmic dashboard.

Setup in the codebase

To enable preview mode, you'll need to set the COSMIC_PREVIEW_SECRET environment variable in your .env file. This secret can be any random string, though we recommend creating a secure string for security reasons.

Setup in Cosmic

*Note that this template currently supports Draft Mode for Posts and Works Object types.

In your Cosmic dashboard, go to your Content and select Posts or Works from the list of Object types. Next, select Object type settings > Additional settings.

Start by copying and pasting this URL into the Preview link field:

https://YOUR_LOCAL_OR_PROD_HOST/api/draft?secret=YOUR_SECRET_PREVIEW_KEY&path=OBJECT_TYPE_PATH&slug=[object_slug]

Replace YOUR_LOCAL_OR_PROD_HOST with your local host (e.g. http://localhost:3000) or production host (e.g. https://your-app.vercel.app), and replace YOUR_SECRET_PREVIEW_KEY with the secret you set in your .env file. Match the OBJECT_TYPE_PATH to the Object type you're editing (e.g. posts or works).

From here, you can now preview unpublished content from the Cosmic dashboard by clicking the Preview button in the righthand sidebar when editing an individual Object.

Deploy on Vercel

Use the following button to deploy to Vercel. You will need to add API accesss keys as environment variables. Find these in Bucket Settings > API Access.

Check out our Next.js deployment documentation for more details.

Your feedback and contributions are welcome!