npm install && npm run tina-dev
The directory structure after src will be as follows:
- assets - global static assets such as images, svgs, company logo, etc.
- components - global shared/reusable components, such as layout (wrappers, navigation), form components, buttons
- modules - JavaScript modules (all components under specific page should go here, e.g. modules/dashboard/component.tsx will contain components rendered in pages/dashboard.tsx)
- store - Global Redux / Zustand store
- utils - Utilities & helper functions and the like
- pages - NextJS page files
- graphql - Apollo/GraphQL files can be found
.ts- utility functions or config files will be followcamelCase.ts.tsx- files that holds react componentspage- if it's a page file, it should followkebab-case.tsxcomponent- if it's a component/module, should followPascalCase.tsx
Added path aliasing (@folder-name) is used to easily determine which files were imported locally and from library, this is very helpful for better organization of imports. Library imports should come first then local.
Running gen:theme-typings will auto generate typescript definition based on the theme/index.ts configuration. Only works in VSCode.
- husky is already included under dev dependencies just
npm installand.huskydirectory will be generated for you. - lint-staged has to be manually setup in order to avoid unexpected behavior when running the script (see
.husky/pre-commit)
Copy the following variables in your local .env
NEXT_PUBLIC_TINA_API_URL=http://localhost:4001/graphql
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=vmc08
NEXT_PUBLIC_CLOUDINARY_API_KEY=233493638886282
CLOUDINARY_API_SECRET=zrOIvhhxBgDKlSYTK8-TDaA1bNY
NEXT_PUBLIC_TINA_CLIENT_ID=
NEXT_PUBLIC_TINA_API_URL=https://content.tinajs.io/content/$NEXT_PUBLIC_TINA_CLIENT_ID/github/master
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=vmc08
NEXT_PUBLIC_CLOUDINARY_API_KEY=233493638886282
CLOUDINARY_API_SECRET=zrOIvhhxBgDKlSYTK8-TDaA1bNY