Hands On Experience: How to Build an eCommerce Store with Next.js?

But first, a background story to give you context. I didn't take the path most Computer Science students take once they graduate. At some point during my college career, while coding my brains out in , , and , I decided that being a full-time developer was not for me.

To be fair, I hadn't known what to do with myself even before college. I’d always liked writing, but you couldn’t get paid for that. (Right?)

As the Internet became more popular, I’ve enjoyed building homemade websites in HTML+CSS, learned a great deal about how to use search engines, connected with people worldwide, and even bought books and Star Trek memorabilia off eBay.

Therefore, the elders in my life had nudged me toward Computer Science, saying I’d be sure to make a lot of money once I graduated. I’d started with programming classes in high school, then continued with that path into college. And while I kept up with my coursework, I was never all that into coding for coding’s sake. It wasn’t something I itched to do in or out of the classroom.

As a result, my career path has been colorful: tech support, technical training, business analysis, and project management. I once had a job helping developers who used my company’s SaaS and APIs to get up and running and troubleshoot their programming issues. But by far, my favorite thing to do has always been technical writing and documentation. I enjoyed writing articles for the company website, for the knowledge base, you name it.

It turned out I could get paid for writing. Who would’ve thunk it?

I like writing so much that I’ve done a fair bit of it outside work as well. It’s been mostly for myself and my own fun, but I was able to get some work self-published under a pen name.

Now I’m doing technical writing full-time. Although I enjoy every second of it and wouldn’t want things any other way, there’s no denying that my technical side has atrophied a bit. It's super-hard for a full-time developer to keep up with all the latest technological trends, never mind someone who isn’t constantly immersed in it.

So, every once in a while, I like to dip my toes back into that water to learn what’s going on. It helps me to write better documentation when I know firsthand what’s important from the developer’s perspective.

On one occasion, I wanted to see if I could deploy one of the Crystallize boilerplates myself. And if I wanted to later on, I could eventually customize the boilerplate to sell my short stories and novels without having to rely on the big A or the big G.

What follows is a nice bit of hands-on experience. How easy or hard was it for a beginner like me to pull off?

Join over 5000+ developers and teams around the world that are not easy to impress.

With so many in the Crystallize Learn section, how do you pick the right one? Kidding aside, this was a real challenge for me. Should I opt for Remix as my main front-end solution or Gatsby or NextJS? And why?

It seems to me the is a perfect candidate for my purposes: a webshop with built-in payment integration relying on NextJS, one of the most popular React-based frameworks at the moment.

OK, so now I have to install it. But before I can do that, I need to make sure I have all the prerequisites in place.

Web development is no longer as simple as opening a couple of HTML files in a text editor and constantly refreshing your favorite browser. There’s a list of things that need to be in place for the boilerplate to run successfully. Here's how I went about getting them. Keep in mind I’m using an with macOS Ventura 13.4.1, but the same basic steps apply to other environments, too.

In this case, the list goes like this:

- Git is the version control system underlying GitHub. It’ll be useful to have around if and when I customize the boilerplate; I’ll be able to revert breaking changes, for instance. From the Git documentation, I saw that one of the install options for macOS is to use , a package manager that I already happen to have. One terminal command later (brew install git), and I was all set!

- This is an open-source server environment that will host the boilerplate locally. Version 18 or higher is required. I used Homebrew to install this as well (brew install node).

Crystallize Account - A Crystallize account is required to work with the demo data and content. I already have one, but if you don’t, you can .

Access Tokens - are necessary to invoke Crystallize APIs that have some level of on them. The and require authentication by default, but other APIs can be set up with higher-level security as well. I’m already good to go here. If you need more help, you can refer to our docs on and .

To install the boilerplate, I could either or use the Crystallize command line interface (CLI). I go with the latter option, typing this command into my terminal window:

npx @crystallize/cli-next@latest install [install folder]

I chose the boilerplate.

Next, I’m prompted to make a decision regarding the Crystallize used by the project. I can point my project to the existing demo tenant, point to one of my existing tenants, or have a new tenant populated with demo data. I chose the last option. Later on, the tenant and its contents (items, , , etc.) will be mine to customize as I see fit.

I then have to provide my access token ID and secret.

After making these selections, the tenant is created, and the boilerplate is successfully installed in my chosen install folder. Great! That was easy.

With that done, I should now be able to run the boilerplate locally. I browse to the [install folder]/application folder, as prompted by the installer:

cd [install folder]/application

From there, I enter

npm run dev

After this, my demo should be available at . I’ll open a new browser window and see what happens …

Woohoo!

From here, I’m free to customize this boilerplate however I like. Our explain where different files reside and what they contain. I’m pretty familiar with tenants and how to go about customizing them with the , but if you’re not, you could refer to our for help. You’re also free to reach out to our with questions and requests. Or you can check part two of my journey, installing the Next JS starter and customizing it.

A certain pride and triumph come from flexing these technical muscles now and again.

Why not give it a try yourself? It may be easier than you think!