My stack for online store on NextJS

I recently finished another online store for heating equipment. I would like to share the technology stack I used for it.

• Website: https://radiatorlux.ru
• Github

At the time of its launch, the store had about 19,000 products grouped by models and collections. In the future, it is planned to expand the assortment to 40-50 thousand products.

Framework and database

The basis of the project is NextJS framework and MongoDB database (I used Mongoose to work with it). The latter was chosen mainly because of its flexibility (there are many specific characteristics for different models of radiators) and the availability of an excellent application MongoDB Compass, which allows you to fill and update the database via CSV import (the database of goods is initially stored in Google Sheets).

Communication between documents and collections is done via the slug text field instead of _id. This approach makes updating and transferring data much easier. For example, if products and models are not successfully populated into the database, they can simply be deleted and re-populated by importing a CSV file without worrying about preserving the links between entities.

The same approach works well with SQL databases.

Database query caching

I had some concerns about how unstable_cache would work with mongoose, but so far the caching is working as expected. Since the data on the site is rarely updated, the caching time is set to 12 hours.

A typical request might look like this

const line = (await unstable_cache(
  async () => await Line.findOne({ slug: lineSlug }).lean(),       
  ["cache:line", lineSlug], 
  {revalidate: 60 * 60 * 12 )()
) as TLine | null;

Wordpress as CMS

WordPress is used here as a CMS. This greatly simplifies the work of managing page content. To identify the needed content, the values of the slug field are used for the corresponding entities.
For example, the description for the collection "Cube" is located at page-content-line-cube. The exact configuration of WP for use as a CMS I have seen in this video.

Unfortunately, I couldn't use WP's built-in meta tags, so I used the Advanced Custom Fields plugin, which allows you to create custom fields for pages and records.

Image Component and CDN

CDNNow is used to deliver product images.

Customization is easy, just specify in the image component the required image sizes based on the window size and the component itself will pass the appropriate width to the loader function:

<Image
  loader={({ src, width }) =>`${CdnUrl}/${src}?width=${width}`}
  src={img.src}alt={img.alt}
  sizes="(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw"
/>

CdnUrl' - the address the server provides when registering your site.

UI

The visuals are generated by tailwindcss and shadcn. This is my default for most projects. Although with the last library and occasionally there are difficulties. For example, in this project, the Drawer component was responsible for displaying variants of paint and radiator connections and did not work correctly on mobile phones. So it had to be replaced by a similar component called Sheet.