This document provides a high-level overview of the project structure and environment variables. It will guide you through the setup and configuration process of your NextJS application. Please refer to the respective sections for detailed information.
NextJS project structure
/app→ NextJS App Router - follow NextJS docs for more info
/components→ React reusable components
/content→ Markdown files for pages
/lib→ Utility functions
/lib/hooks→ Custom React hooks
/lib/providers→ React Context providers
/lib/services→ API services
/lib/store→ Zustand store
/lib/utils→ Utility functions
/lib/config.ts→ App configuration
/public→ Static assets to be served
/styles→ Global styles
Feel free to change the project structure to your liking. Just make sure to keep the
app folder as it is as it contains the NextJS App Router.
Environment variables are a fundamental part of developing with Node.js, allowing your app to behave differently based on the environment you want them to run in. They are stored in the
1ALGOLIA_ADMIN_API_KEY="" 2NEXT_PUBLIC_ALGOLIA_APP_ID="" 3NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY="" 4NEXT_PUBLIC_ALGOLIA_INDEX_NAME=""
Currently, the boilerplate uses only one service that requires environment variables - Algolia. Algolia is a search-as-a-service platform that allows you to build search into your websites and mobile applications. You can read more about it here.
Follow the Algolia Search docs to learn how to create an account and get your credentials.
Environment variables are validated at build and runtime. If you are missing any required variables, the build will fail. If you are missing any required variables at runtime, the app will fail to start.
We're using the awesome @t3-oss/env-nextjs package to make the process of managing environment variables easier.
If you need to add more environment variables, you can do so by adding them to the
.env file and updating the validation rules in the
.env file is ignored by git so you don't accidentally commit your secret credentials.
/lib/config.ts file contains all the configuration options for the app. You can use it to configure the app to your liking.
1export const SITE_NAME = "My Documentation" 2export const SITE_DESCRIPTION = "My Documentation description"