Next Bookstore is an open-source e-commerce web application for an online bookstore, built with Next.js 13's experimental appDir, TypeScript, and a StrapiCMS backend. Created by Sat Naing, who designed the UI/UX in Figma and developed the app from scratch, this project demonstrates a full-stack approach to building a storefront with a headless CMS.
What is Next Bookstore?
Next Bookstore is a full-stack e-commerce template that uses Next.js 13 with the experimental appDir for the frontend, Radix UI and TailwindCSS for styling, and StrapiCMS as the headless backend. It provides a working online bookstore with product display, search, add-to-cart, and wishlist functionality, plus an about page and hero section. The app fetches product data from Strapi via TanStack Query and Axios, manages client state with Zustand, and handles forms with React Hook Form. The output is a responsive, SEO-friendly storefront that runs locally on localhost:3000 and can be deployed to Vercel and Railway.
Key Features
- Responsive Design — Adapts to mobile, tablet, and desktop viewports using TailwindCSS utility classes.
- Search Functionality — Users can search for books from the catalog served by StrapiCMS.
- Add To Cart — Items can be added to a shopping cart with state managed by Zustand.
- Add To Wishlist — Users can save books to a wishlist for later reference.
- SEO-friendly — Next.js server-side rendering and metadata support help pages rank in search engines.
- Accessible — Radix UI provides keyboard navigation and ARIA attributes out of the box.
- Headless CMS backend — StrapiCMS manages product content, and Cloudinary hosts product images.
- Modern data fetching — TanStack Query with Axios handles server state caching and revalidation.
Who is it for?
- Developers learning full-stack Next.js — they can study how appDir, server components, and a headless CMS work together in a real e-commerce app.
- Indie bookstore owners — they can use the codebase as a starting point to build their own online store, replacing sample data with their inventory.
- E-commerce developers — they can fork the repo and customize the frontend or backend to build a production storefront, though the author notes it is still in Beta.
- UI/UX designers — they can reference the Figma-designed interfaces and Radix UI component patterns for accessible shopping experiences.
What can you do with it?
- Create a book storefront: Set up StrapiCMS with products, then display them in a responsive Next.js interface with search and cart.
- Prototype an e-commerce UX: Use the existing design system (Tailwind + Radix) to quickly test shopping flows like add-to-cart and wishlist before writing business logic.
- Learn the appDir pattern: Explore the use of Next.js 13's experimental file-based routing and server/client component boundaries in a non-trivial codebase.
How does it work?
The repository is split into a root frontend and a backend folder for StrapiCMS. After cloning, run npm install in both, start the Strapi development server with npm run develop in the backend folder, and start Next.js with npm run dev in the root; then open http://localhost:3000. The frontend fetches book data from Strapi via TanStack Query and Axios.
Pros and cons
- Pros: MIT-licensed open source, uses a modern stack (Next.js 13, TypeScript, TailwindCSS, Radix UI), includes a ready-made Strapi backend, and is designed with accessibility and SEO in mind.
- Cons: Still in Beta — order processing, filtering, and better pagination are listed as coming soon; the backend stores data in a committed SQLite file, which the author says is not recommended for production; no tests or PWA support yet, as noted in the roadmap.
Pricing
Free and open-source under the MIT License.
Alternatives
- Next.js Commerce — Vercel's official storefront template for Next.js, which targets broader e-commerce use cases with more production features.
FAQ
Is Next Bookstore free?
Yes, the project is open-source and licensed under the MIT License, so you can use, modify, and distribute it freely.
What backend does Next Bookstore use?
Next Bookstore uses StrapiCMS as its headless CMS backend. The backend lives in a backend folder and can be run locally with npm run develop. Product images are hosted on Cloudinary.
How do I run Next Bookstore locally?
Clone the repository, run npm install in both the root and backend folders, start the backend with npm run develop inside the backend folder, then run npm run dev at the root and open http://localhost:3000.
Is Next Bookstore production-ready?
Not yet — the project is labeled Beta. Order processing, filtering, better pagination, error handling, and security improvements are listed as coming soon. The author also notes that the committed SQLite database (backend/.tmp/data.db) is not recommended for production and suggests using PostgreSQL instead.
What features are currently supported?
The current build includes responsive design, search, add-to-cart, add-to-wishlist, SEO-friendly pages, and accessible UI components via Radix UI.
