There are numerous third-party Next.js starters available; however, sometimes they just don't fit your preferences. That's when it might make sense to customize a starter or build a totally custom option. Walk with a fellow dev as they think through the ideal starter for them.

Part 2: Building a Custom Next.js Starter

A Next.js starter is a fantastic solution if you want to boost your productivity and move forward confidently with your future projects.

In our previous article, we explored what starters are, what types are available, and how to know if you need to build a custom one.

To quickly recap, a starter project is a pre-made, foundational code base for building applications. Using one allows you to save time on your future projects by reducing the number of repeatable actions it takes to spin one up.

In our previous article, we identified two types of starters that you can use:

Technology-oriented - A project that is shipped without any UI elements and focuses on configuring tools and libraries so you can build on top of it quickly and easily.

Use-case-oriented - These starters have a feature-rich setup with the customizable components and elements you need to deliver outstanding projects for a specific use case, like a marketing or e-commerce website.

While you can use third-party starters that others have created, they aren’t always the right fit for your work. In this article, we will go through the steps of building a custom Next.js starter project. We’ll start with a technology-oriented starter, and then build a use-case-oriented one on top of it. This way, we will cover some ideas that were mentioned in our previous article:

How do you identify what to include in your starter to make it as reusable as possible?

First, let's figure out what technologies we want to use for our starter.

For that, we need to identify the tools we feel confident with, understand well, and use on most of our projects.

Let's step back and think about the values we should keep in mind when thinking about creating a quality starter:

Reusability - the primary purpose of the starter project is to have a foundation for multiple projects that your favorite stack can support. It's essential to pick the bare minimum to include here so that you don’t block the reusability.

Flexibility - A starter project should not limit you but rather boost your productivity. A starter that’s not flexible enough will leave you adjusting the code base every time you start a project, rather than diving into your work. The right level of flexibility is different for everyone. Try to focus on including only the things that you use on every single project.

For this project, here’s the stack we’re going to use, along with why I’ve chosen each element of it:

Next.js provides a complete toolset to build fast and SEO-friendly projects. A great developer experience is not the only benefit you get with Next.js — you also get a strong community that can help you along with your work. For me, it’s very often the foundation for the websites I build, so it makes sense to include it.

Tailwind will give us a solid solution for styling because it offers a fast styling process and simplicity for implementing responsive design. Tailwind is a project that has been around for quite some time and is improved frequently, which is vital for excellent developer experience since it's constantly enhanced and polished.

I’m obviously biased toward including Prismic in my project 😉 But, I think it makes sense for my starter because it is a well-documented headless website builder with excellent support for different stacks, including Next.js. We are adding Prismic as a part of the technology-oriented starter for two reasons. As a type of CMS, it allows us to get a complete setup for managing content, and it also enables us to create websites for teams with different skill sets. Both technical and non-technical teams will be able to work on improving our website once it’s implemented.

These are the technologies for our most basic, technology-oriented starter. Later on, we will extend this starter so that it’s ready to go for a marketing website use case.

Building a technology-oriented starter with Next.js, Tailwind, and Prismic

With Next.js, we get a solid framework with all the tooling to create top-performing and SEO-friendly applications.

To start creating our starter project, we need to create a Next.js project.

This can be achieved by running the following command in your terminal:

After hitting enter, we will be guided through the multi-step wizard to get a bootstrapped project with all of our preferences.

Let's review what we got after completing the CLI flow. First, we gave our project a name. In the next step, we needed to decide whether to go with Typescript or use the default JavaScript option. We went with JavaScript. Then we decided that we wanted to use ESLint as our linting solution. And finally, we decided to stick with the `src` directory approach.

Now we are ready to proceed to the next step!

In general, Tailwind is a powerful and flexible tool that you can trust in production. It also allows us to write more consistent and maintainable code. With the help of their fantastic documentation, we will also speed up the development process. So let’s dive into adding it to our starter!

To do that, we need to open our terminal for our new Next app’s directory and type:

Install the `tailwind` package and its peer dependencies via npm

Create `tailwind.config.js` and `postcss.config.js` files in the root of your project

Once you are done with that, we can work with `tailwind.config.js` so it will know where we plan to use Tailwind in our app. In simple words, we need to tell Tailwind, "Hey, I plan to use Tailwind-specific classes in these folders for these types of files.”

To be more specific on what we want to do, we need to add paths to our template files.

Finally, all we need to do is add Tailwind directives to our CSS. We can do this in the file where we store our global styles.

Using the default `globals.css` file you already have in your starter is a good idea for a cleaner solution since it doesn't break the recommended project's base architecture from the Next.js CLI. Additionally, we don't need to verify that we’ve attached our global styles.

Once we are done with that, we can add Prismic as our final puzzle piece!

Prismic is a headless, API-first website builder that will allow us to design a custom workflow for creating new pages and connect the page content to a fully custom front-end made with Next.js. We’ll be able to create custom sets of content fields to use as building blocks in Prismic’s page builder interface. Prismic calls these building blocks Slices, and they will become reusable components in our Page Builder interface.

Let's get an overview of the Prismic setup steps we’ll save ourselves for future projects:

We’ll initialize Slice Machine. This is a developer tool that’s going to help us configure our components to get data from Prismic’s API, configure our content fields for the Page Builder, and more.

We’ll add all of the code required to make Prismic’s handy helpers available in our project — as with every tool we have in our setup, we need to add code that enables Prismic in all the right places.

To add Prismic, we need to navigate back to our terminal and type:

This command does a bunch of cool tricks for us. Here are some that show the general trend of what’s happening under the hood:

Adds a Slice Machine script to `package.json`.

Creates a `sm.json` configuration file.

Detects that we are using Next.js and installs the necessary dependencies.

Later on, we’ll initialize Slice Machine to see what this developer tool is all about. For now, let's create a `prismicio.js` file at the root of our project and add the following code there:

Right after that, we can use the `PrismicProvider` and `PrismicPreview` components in `src/pages/_app.js` to wrap our entire app. Here’s what each component does:

`PrismicProvider` allows us to use key utilities to make Prismic work in your project.

`PrismicPreview` enables previews for our application (once you’ve completed some additional setup steps).

There are only two things left to do, and both of them help us set up Slice Simulator. Slice Simulator is a mini-app that allows you to locally preview the components you create without switching back and forth to Prismic’s Page Builder to create data for your preview. Instead it provides mock data to populate your components locally. First, we’ll create a Slice Simulator page. Then we’ll specify a Slice simulator URL.

To create a Slice Simulator page, let's create a file called `slice-simulator.jsx` inside the `pages` directory. Inside, paste this code:

And finally, in `sm.json` at the root of our project, let's add a property for the Slice Simulator URL:

Phew! We did a lot! And now it's time to celebrate because we have our own technology-oriented starter! Let's do a quick recap of what we did and what we have at this point.

We identified the tools we wanted to use for our starter. We went with Next.js, TailwindCSS, and Prismic (great choice, my friend). After identifying the tools, we did some cooking, and as a final result, we have our own custom Next.js starter! This project can be used as a solid foundation for any of our future projects.

If that’s all you needed, you can jump down to publishing your starter to GitHub so that it’s ready to use on your next project.

Ready for more? Let's use this starter to build a more specific use-case starter on top of it! How cool is that?

Building a starter for marketing websites with Next.js

Let's imagine that we are working at an agency to set the right mood for our use case starter.

We build a lot of marketing websites and often do re-branding projects for companies to take their digital growth to the next level. We already have a good technological base to build from, so now it’s just about adding on the layers of UI elements that are common across these projects. Since we’re building these sites for marketing teams that want some independence, we can think about which building blocks we need to give them in their Page Builder interface.

Let’s identify what we might need in Prismic’s universe.

First, we need templates, which Prismic calls Custom Types**,** to create top-level elements that provide a structure to hold our building blocks. One example would be a “page” Custom Type.

Then, we’ll add our components, a.k.a. Slices, as the building blocks for the body of our pages**.** Each of our Slices will have custom fields that we can define so that our marketers can put all of the right information into every Slice.

First, let's start with Custom Types. There are two categories for custom types:

Single types for when you need only one instance for your content, such as a really unique and complex homepage.

Repeatable types for when you’ll reuse the same template many times, like many marketing pages or articles.

For this project, we will need two Custom Types:

Settings - a Custom Type where we can group things like menu structure, social links, contacts, etc.

Page - a repeatable Custom Type that we can use to create pages dynamically

Then we’ll need some Slices. For this starter, we’ll think about the Page Builder components that are common across all of the marketing websites that we work on. Let's see those:

Hero - we need to have this Slice as an intro to pages

CTA - calls to action are pretty common, right?

Features - a list of services is something that you can definitely reuse

Cover - a handy element with an image in the background and text over it

Image grid - adding this Slice will allow us to show off products and more with first-rate visuals

Now that we identified the list of elements that might be included in the starter, it's time to start building again!

You might think, "Okay, now I have to install and configure Prismic." You don't have to! Because we did that as a part of our technology-oriented starter, you can use Slice Machine straight away to start configuring Prismic and your reusable components!

Let’s add a theme and configure Tailwind for our starter.

The theme is a file where you define the important properties for your project’s design, like:

In order to create a complete use-case-oriented starter, we will implement the following theme to have a complete design look and feel but keep it flexible and editable at the same time. In `tailwind.config.js` add the code for the `theme` section to your file.

Now that we have everything in place, let's create the Custom Types we mentioned earlier to see that process in action. Let's go with the Settings Custom Type first.

To get started, we need to run Prismic’s developer tool, Slice Machine (if you didn’t already), so in your terminal run:

Open Slice Machine on http://localhost:9999/ and click the "Create one" button near the center of the page to start.

You will see a modal window where you can specify if the Custom Type should be repeatable or for only a single use. For our settings, we should pick the single option because we will need to make it only once to group the following elements:

Name your Custom Type, “Settings,” and its ID will be automatically generated for you; then click “Create.” Now it’s time to configure the data we want people to be able to add to our Custom Type in the Page Builder interface.

To do that, click the “Add a new field” button under the “Static Zone” heading.

The first fields we’ll add are for the Menu. From the dialog box, select the “Group” field type, name it “Menu,” and then select “Add” to update your data model. This type of field means that any fields you add to the group in Slice Machine will be repeatable for content editors in the Page Builder. So, next, you’ll add fields for links and menu labels to this group, and in the Page Builder, content editors will be able to add as many items to the menu as needed.

To add more fields to the Menu, you’ll use the “Add Field” Option that’s now available on your new Menu element. For your Menu, you’ll add a Link field that’s named, “Link,” and a Key Text field that’s named “Label.”

You’ll repeat a similar process for the contact and social links elements. For the contact element, you can use a rich text field. And for the social links element, you can repeat the same process that you did for Menu, but this time naming the Group “Social Links.”

Finally, your Custom Type should look this way.

Now, click the “Save to File System” button in the top right corner to make sure your changes are ready for you to move on.

The Page Custom Type will require less work! Head over to the Custom Types tab on the left-hand menu to add another Custom Type, using the “+ Create a Custom Type” button on that page.

This time, you’ll create a repeatable type named, you guessed it, “Page.”

We don't need anything complex for the Page Custom Type in the Static Zone, and we only need to specify the `uid` for routing purposes. This way each page will be associated with a route based on the `uid` value. The `uid` is a special field you can find when creating a new Custom Type, and you can also simply give it the name “uid.”

Next, we need to add a metadata tab for our Pages. To do that, press the "+ Add tab" button and name your tab "Meta." Here we need just two items in the static zone:

Meta title - a rich text field that will allow content teams to control the title that’s visible to search engines, etc.

Meta description - another rich text field that will allow content teams to control the descriptive text that’s visible to search engines.

For specific projects, you could customize this tab even further with fields for OG images, and more. For now, the fields above are all we’ll need, so go ahead and save this Custom Type to the file system, as well.

As you can see, there’s also another zone in addition to the Static Zone — the Slice Zone. Once we’ve created some Slices, we can come back to our Custom Type and add Slices to this zone that content editors will be able to use (and reuse) to create your gorgeous-looking pages in the Page Builder!

And we are done with Custom Types for now!

How cool is that? Our fabulous-looking starter is coming together!

We are ready to proceed with creating our Slices.

As we mentioned earlier, we need a few of Slices for our starter:

Contact form - important to keep in touch with your audience

Features - list of services is something that you can definitely reuse

Hero - we need to have that slice as an intro to pages

Image grid - adding this slice will allow us to have a stunning image grid

Let’s go through the build process of the Hero Slice to see how it works. From there, you’ll be set to create all of the Slices you need for this starter and beyond!

At the end, we will have a Slice that we can use as an intro for our pages.

First, navigate to the Slices tab. There you will see a modal window with an intro video similar to the one you saw when creating Custom Types.

After pressing the “Create one” button, let’s model the fields our Slice. In order to create the “Hero” Slice, we need the following structure:

After adding all of the necessary fields, our Slice’s structure should look like this:

After saving our Slice to the filesystem, let’s head back to our “Page” Custom Type. Now, in the Slice Zone, we can select, “Add a new Slice.” There’s our Hero Slice! Select it and add it to the Custom Type. Save the changes to the file system. Now, anyone building a page can use our Hero Slice as a building block on as many pages as they want.

To finish configuring the data and our Page Builder, all we need to do is go to the “Changes” tab and click the “Push All Changes” button. Now, when anyone logs into our Prismic repository, they’ll be able to create pages with our Custom Type and Slice.

Now, to see some of the other magic that Slice Machine helped us with, we can navigate to the code editor and see that folder for our brand-new Slice was created in the `slices/Hero` folder with templated code. In the `slices/Hero/index.js` file, we see:

Since we use Tailwind for our starter, we’ll add some classes in `slices/Hero/index.js` that we’d commonly use for the hero element of the page so that this component is ready for future projects:

In a similar fashion, we can create all of the Slices that we need in order to have all of the building blocks to complete our starter. Now it’s your turn to try your hand at modeling the fields and adding Tailwind classes the rest of our basic Slices!

And there we have it! Two excellent starters built using Next.js, Tailwind, and Prismic!

Now, you can see the full power behind starters and how you can improve productivity by saving set-up steps for future projects. In the end, it’s a matter of knowing how much set-up you can include in your starter while keeping the code base flexible enough for many applications.

⭐ Bonus: If you want to make your starter even more efficient for the future, head over to our documentation to fully configure Previews as part of your starter.

Now, once we’ve created a starter, whether we were happy with just the technology-oriented one, or we want to use the full use-case-oriented Next.js starter, we can move it to GitHub.

To do that, we can follow the commands that GitHub supplies us with:

But we need to make one minor modification to make our repository fancy and polished! If we navigate to our repository’s settings, we can see a checkbox with the title "Template repository," which will ensure that newly generated repositories have the same directory structure and files!

After doing that, you will notice the pill element with the text "Public template" or "Private template," which will confirm that your changes were applied.

Template repositories allow you to generate repositories with the same directory structure, branches, and files. No additional actions are required when using a template repository; it simplifies the process and improves your productivity when using your starter on your next project.

Make your development work even more productive!

Phew, that was a lot! Let's do a quick recap of what we did:

We took a look back at what starters are and what kind of starters we can build.

We picked the stack for our custom Next.js starters and identified the tools we wanted to work with.

We started by creating a technology-oriented starter.

Then, we used that starter to create a use-case-oriented one on top of it for a marketing website made with Next.js.

And finally, we moved our starters to GitHub and modified our repositories to be template repos.

Now with that knowledge, you are fully ready to create more amazing starters for your needs! You can also check out the Next.js starters that the Prismic team made to help you succeed faster!

A Next.js starter can be a great way to learn about new tools or to work more efficiently with the tools you use all the time. Here's a guide to help you find the right third-party starter for you or to get started building a custom starter!

Quick Start Guide: How to Find the Right Next.js Starter for You

Building amazing projects can be challenging and overwhelming.

With various tools, we invest a lot of time into creating scalable and sturdy solutions that can deliver an excellent developer experience for our teams and a great experience for users.

Efficiently managing all of those tools, including Next.js, is where using third-party starters or building your own starter becomes helpful. With starters, you can get the following benefits:

Reduce the amount of manual work required when creating a new project

Create a solid foundation for every project out-of-the-box

Save time, so your engineering team can focus on delivering great projects

With all of these benefits, there are a few things you need to be aware of to identify what your perfect starter looks like.

In this article, we'll define what starter projects are, discuss the benefits and drawbacks of using them, provide examples of great starters you can use right away, and explore what it looks like to build your own custom Next.js starter. In part two of this series, we'll actually dive into building our custom Next.js starter.

First, let's define what a starter is. A starter project is a codebase shaped for reuse when building various applications.

Essentially, a starter project is a pre-made foundation for building your next application.

Let's look at starters through the lens of an example. You work for an agency and build many applications with a similar stack or use case. You surely do a lot of repeatable actions when kicking off new projects. Instead of doing those repeatable things, you can identify them and craft a foundation for your future projects where you won't have to set up the application manually every time.

There are no limits to what you can include! You are in charge of the recipe and can decide which ingredients make your starter project exactly what you need — a solid foundation that improves your developer experience and brings your work efficiency to the next level.

Two categories to help you assess Next.js starters

When choosing your ingredients, you might need a starter that's more technology-oriented, or if you build the same type of website often, you might need one that's more use-case-oriented. We will cover these types later in the post, but here's an example of each type of approach:

Technology-oriented starters work best when you build a variety of projects, but all with the same core technologies. Example: a Next.js and Tailwind boilerplate setup that has your favorite tools preconfigured and ready for you to build an incredible application.

Use-case-oriented starters work best when you often build similar types of projects that also share the same core technologies. Example: a feature-rich setup with a set of tools and components that you need to build incredible apps for a use case like e-commerce applications with Stripe or Snipcart.

There are plenty of excellent third-party solutions that you can use right now as a foundation for your next project. With the tremendous growth of the open-source culture, starters are something companies and enthusiasts frequently build.

These projects are fully customizable and can often serve as a playground to help you understand if you want to use a specific tool. Here are some Prismic starter projects you can check out to explore a headless website builder:

Multi-language project with Next.js & Prismic

Multi-page marketing website starter with Next.js and Prismic

But, it’s important to note that you are open to more than third-party solutions! In the second part of this article, we will begin exploring how to build a custom starter project if no third-party solutions meet your needs.

Now that we covered what a starter project is and how we can classify them, let's see when it makes sense to use a starter and when it doesn't. And let's go even further — we'll think together about whether a third-party starter is something you should go with or if you need to craft your own.

Starters are a great solution if you build many projects with a similar technology stack and purpose. In that case, starters reduce the manual work and give you precisely what you need — a foundation you are comfortable with and something you can build on top of without any setup stress.

Third-party starters are also great if you are exploring new tools and learning foundational best practices for using them, and you can build on top of them as you go. Often, starters are a great addition to documentation and help you see tools in action.

If third-party solutions only partially fit your needs, but you still need to reuse the same elements across many projects, a partially or fully customized starter can also be great. A middle ground between third-party starters and custom ones might be shaping a third-party starter for your needs.

On the other hand, starters might be an unreasonable time investment if:

You are not confident about the tools and libraries you are planning to use — starters don't behave the same way as themes or plugins, so you should treat it as something you can't easily switch later on.

It's a one-time project, and you can't find an open-source starter that fits your needs. In that case, you'll invest a lot of time into reusability, which is not essential for you.

Licensing is one of the fundamental aspects of using a third-party starter. Can you use starters built by other teams safely and without any stress?

Let's see what points are usually essential to think of from the licensing perspective:

Commercial use: is it safe to use the starter for commercial purposes for your brand?

Modification: are you allowed to modify the starter for your needs?

Distribution: is it safe to use the starter for distribution?

Private use: can you use and modify the starter in private?

Let's look at the Apache license, which Prismic’s starters use. Long story short, it allows you to use the software for any purpose without any concern for royalties. You can modify, distribute, and distribute modified versions of it!

Reading the description of any license type can be a bit painful. I get it. That's where GitHub features come in handy! If you crack open the license file on GitHub, at the top, you will see a card element where all of the essential aspects are mentioned.

Now, let's cover some great third-party starters you can use right away. We'll group these starters logically into our technology-oriented and use-case-oriented groups from earlier.

First, let's cover technology-oriented starters. Usually, these starters don't carry any UI elements and serve as a foundation with a specific tech stack. In modern development, configuration sometimes takes more time than the actual use of the tools, and that's why starters with preconfigured stacks are extremely helpful.

Here are some examples of starters you can try out:

Next.js toolbox - a starter that integrates features that are commonly used when building projects with Netlify

Next.js with Turborepo - an official starter with two Next.js sites and multiple local packages powered by Turborepo

Handling custom web fonts - a starter project that gets you off and running with custom web fonts

Now, let's see some use-case-oriented starters. These starters provide a fully functional foundation for a use case. Some of the examples are:

Next.js blog starter - a complete blog built with Next.js, Prismic, and Tailwind

Next.js Commerce - an all-in-one React kit for e-commerce sites

Documentation starter kit with Next.js - a starter for creating documentation sites with Nextra

When exploring third-party starters, you might realize that you have a vision for how your perfect starter should look, and it doesn't exist yet.

Great news! You have a fantastic opportunity to build a custom starter. (And who knows, maybe someone else needs your perfect starter, too — don’t forget that you can open-source your project.)

One of the approaches you might use is building your solution on top of a third-party starter. If you find a starter that works for you but could be better, you can use it as a foundation for your solution. This is a good approach since you will follow best practices already implemented in the starter and build on top of those.

On the other hand, you can build a fully custom starter. This might be the right decision for you to make for different reasons, such as:

You can't find a starter that combines your favorite tools, or you like to use some tools in a specific manner.

You build many projects with a specific use case and have to create similar components frequently. Moving this to a template is a reasonable decision that will surely improve your productivity.

When building a house, the foundation is something you can't easily change later on. It’s a similar story if you’re going to do the work of creating a fully custom starter. That's why investing time in preparation and analysis is essential. Let's think about best practices when building a starter and identifying how flexible it should be.

What are the best practices for a good starter? As always, the best answer will be "it depends," but let's set the right tone and mindset to help you build one that brings your productivity to the next level and reduces repetitive actions!

First, you must identify the tools you plan to use in every project you create.

Here you have to answer some questions for yourself:

Do you have a solution for styling that works for you?

What specific functionalities do you need to implement often in your apps (e.g. authentication)?

What are the things you feel confident working with and don't plan to change no matter what project comes next?

Have a list building in your mind? It's going straight to the starter!

Next, it's essential to identify the tools you are unsure about or plan to use only once — leave those tools out.

Here, let's look at an example. Your next project has plenty of animations, but that is not a general trend for things you build. With that in mind, your animation library should not be a part of your starter. In order not to spoil reusability, we encourage you to avoid using something that you might only use one time.

This consideration is essential, and the answer is in the question.

As we mentioned before, a starter is a solid foundation you trust and are ready to use for any project you build.

Choose your toolset carefully. Your starter should help you boost the development process and not limit or add complications to the development process.

Being too opinionated about some parts of your toolset can spoil the flexibility of your starter, which would block your goal of creating a foundation that will help you to be productive and build incredible things on top of your starter.

To build a flexible and helpful starter, start with a simple solution and add things iteratively to see what works best for you!

Vadim Smirnov

Part 2: Building a Custom Next.js Starter

Part 1: How to Find the Right Next.js Starter for You

Deliver a website with a visual Page Builder for your marketing team