Below are some of the conventions used in the Next.js Supabase Turbo Starter Kit.
You're not required to follow these conventions: they're simply a standard set of practices used in the core kit. If you like them - I encourage you to keep these during your usage of the kit - so to have consistent code style that you and your teammates understand.
Turborepo Packages
In this project, we use Turborepo packages to define reusable code that can be shared across multiple applications.
- Apps are used to define the main application, including routing, layout, and global styles.
- Apps pass down configuration to the packages, and the packages provide the corresponding logic and components.
Creating Packages
Should you create a package for your app code?
- Recommendation: Do not create a package for your app code unless you plan to reuse it across multiple applications or are experienced in writing library code.
- If your application is not intended for reuse, keep all code in the app folder. This approach saves time and reduces complexity, both of which are beneficial for fast shipping.
- Experienced developers: If you have the experience, feel free to create packages as needed.
Imports and Paths
When importing modules from packages or apps, use the following conventions:
- From a package: Use
@kit/package-name
(e.g.,@kit/ui
,@kit/shared
, etc.). - From an app: Use
~/
(e.g.,~/lib/components
,~/config
, etc.).
Non-Route Folders
Non-route folders within the app
directory are prefixed with an underscore (e.g., _components
, _lib
, etc.).
- This prefix indicates that these folders are not routes but are used for shared components, utilities, etc.
Server Code
Files located in server
folders are intended for server-side code only. They should not be used in client-side code.
- This convention helps clarify where the code is meant to run, which is particularly important in Next.js where the distinction can be blurry.
- For example, server-related code for a part of the app can be found in the
_lib/server
folder. - Include the
server-only
package at the top of the file to ensure it is not accidentally imported in client-side code.