Thank you for showing interest in building the next coolest Nakkei Theme!
Here you will get information you need to have before you build and what will help you along the way
PS: You can Checkout (and/or clone) this sample theme library to see how it works
The Nakkei site is a NextJs Project, so the components built must be react components
Make sure you use Typescript in your project for type safety. However, you won't need to declare most of the types and interfaces used in Nakkei. We'll be using nakkei-theme-types libray accross all Nakkei themes for uniformity.
The types are for data used in the project like product,service,cart,etc, as well as component props
The declared types in nakkei-theme-types are documented in the types and components pages
Every theme is expected to export mostly React components that will expects some props like layout and data. Some of these components are must-have&apo;s, while others are optional, depending on the type of theme you&pos;re working on. For instance, a theme that focuses on bookings may not need to export a products page component or product list component.
For every component exported, the name must follow the pattern Nakkei{ComponentName}. The Name also must match any of the components listed in the components page.
All components must be exported from the library's entry point and not any nested directory. So the code import {'ComponentName'} from 'your-nakkei-theme' should work for every component.
For CSS, ensure all the css are bundled together and and exported as a whole via 'your-nakkei-theme'/css
Basically, part of your package.json should look like this:
{
...,
"files": [
"dist"
],
"exports": {
".": {
"default":"./dist/index.js"
"types": "./dist/index.d.ts"
}
"./css": {
"default":"./dist/style.css"
}
},
...,
}Notice that the bundled files are in the dist folder(which is published) located in the root folder . All the components are exported via the default (or entry) point which is simply the-library-name, while the css is exported via /css
Ensure your project is bundled to reduce size. You can use Rollup or Vite or any other bundling library of you choice. nakkei-theme-types and the sample theme library both use Rollup. You can check them out.
All libraries have to be published into npm