How to create a website with Next.js, Tailwind and Prismic.io

In this article I want to show you how I created the basis for this website and provide a step by step guide. It consists out of Next.js as a Framwork, Daisy.ui for styling and Prismic.io as a Content Management System (CMS).

Prerequisites

Good knowledge in Javascript, React and Next.js is needed in order to follow this project and especially to build something upon this platform.

1. Create a Next.js app

Visit this website and pick one option you like to start a fresh Next.js project.

https://nextjs.org/docs/pages/api-reference/create-next-app

In my case I used the following

1
yarn create next-app

Now you need to answer the basic questions about your project setup. Here is the example from my project. If you want to have it slightly different, then answer accordingly. And of corse pick your own unique project name.

1
2
3
4
5
6
7
✔ What is your project named? … setup-guide
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

When you finished this step, you already have a very solid base to start a website project. But now comes the harder part. Pick the right tools to maintain and scale your website in the right way. For a blog of this type I wanted to have 2 very important things in place.

2. Install Component Library Daisy.ui

A component library is always a good choice on solo projects. As well as for team projects, but there are reasons to build self made components in some cases. In general there is no need to create buttons, inputs, modals etc. because there are very good ones freely available and they are maintained and updated. In case of this project I choose Daisy.ui. Mainly because I like the concept of having the JSX in your own project and the library mainly defines custom tailwind classes for the components. So you are very free in customising every edge of the components. And another reason was the nice theme generator the website offered.

2.1 Installing

1
yarn add daisyui@latest

Add the following in you tailwind.config.ts

1
2
3
4
5
6
module.exports = {
  //...
  plugins: [
    require('daisyui'),
  ],
}

2.2 Generate a theme

Visit Daisy,ui generator page and pick a theme you like. With the randomise button you can try combinations.

Copy the theme into your tailwind.config.ts like shown on the website. My config looks like this now.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#4e00ff",
          "secondary": "#00eaff",
          "accent": "#00ccff",
          "neutral": "#1e2333",
          "base-100": "#362327",
          "info": "#008de4",
          "success": "#00a964",
          "warning": "#ff6500",
          "error": "#ff7f8b",
        },
      },
    ],
  },
  plugins: [
    require('daisyui'),
  ],
};
export default config;

3. Install Prismic.io with all dependencies

Run the following command in the root of your project and follow the instructions step by step. But this step requires you to have an account at Prismic.io!

1
npx @slicemachine/init@latest

At the last step you are being asked to run the slice-machine. Answer with (y) to get the party started.

Now you can visit http://localhost:9999/ and begin to create your page types to really get some content on your page.

If you have some trouble during the installation here is the dev documentation from Prismic.

After this step you should be able to see you project in the dashboard of Prismic.io and I would recommend to read through some of the concepts of Prismic.

Conclusion

I want to keep this manual as short as possible and this is just the very basic setup to start a blog like this you are currently reading. There will follow more specific guides about the page type and slices of Prismic. And some tips and tricks about Daisy.ui. But after going through the steps of this tutorial you have a very good starting point to get creative, learn more about the technologies and create whatever application you want on top of this.