Kick off your project with this boilerplate.
git clone https://github.com/TokTokHan/ficl-next.git <Project Name>
cd <Project Name>
yarn install
yarn run devyour site is now running at http://localhost:3000
A quick look at the directories you'll see in this project.
.
├── pages #
├── public #
├── styles #
├── apis #
├── models #
├── components #
├── context # (alternatively `store`)
├── hooks # Custom hooks
├── utils #
├── libs #
├── cypress # Automated tests
├── README.md #
└── ...
Each page is associated with a route based on its file name.
.
├── ...
├── pages #
│ ├── apis # API endpoint
│ ├── _app.tsx # App component to initialize pages
│ ├── _document.tsx # Custom document to augment application's <html> and <body> tags
│ └── ...
└── ...
Next.js can serve static files, like images, under a folder called public in the root directory.
.
├── ...
├── public #
│ ├── favicons #
│ └── ...
└── ...
Css, theme configuration files are placed into this folder.
.
├── ...
├── styles #
│ ├── theme.tsx #
│ └── ...
└── ...
Api call related functions.
Components are independent and reusable bits of code.
.
├── ...
├── components #
│ ├── icons #
│ ├── common #
│ │ ├── atoms #
│ │ ├── molecules #
│ │ └── organisms #
│ ├── home # /index
│ │ ├── molecules #
│ │ └── organisms #
│ ├── products # /products
│ │ ├── molecules #
│ │ └── organisms #
│ ├── ... # other pages
│ └── templates #
└── ...
Context provides a way to pass data through the component tree without having to pass props down manually at every level. (just like redux)
.
├── ...
├── context #
│ ├── auth #
│ └── ...
└── ...
Custom hook allows you to extract some components logic into a reusable function that starts with use and that call can other hooks.
.
├── ...
├── hooks #
│ ├── useScript.tsx #
│ └── ...
└── ...
Small snippets you can use throughout the application. Short and specific functions and constants used throughout application.
Libraries you can use throughout the application. A library is a JavaScript file that contains a bunch of functions, and those functions accomplish some specific purpose.
.
├── ...
├── libs #
│ ├── gtm.ts #
│ └── ...
└── ...
Automated tests with cypress.
.
├── ...
├── cypess #
│ ├── fixtures # Fixed data sets
│ ├── integration # End-to-end, integration tests (alternatively `e2e`)
│ ├── plugins #
│ ├── support #
└── ...
-
Extensions: Use .tsx extension for React components.
-
Filename: Use PascalCase for filenames. E.g., ReservationCard.tsx.
-
Reference Naming: Use PascalCase for React components and camelCase for their instances.
// bad import reservationCard from './ReservationCard'; // good import ReservationCard from './ReservationCard'; // bad const ReservationItem = <ReservationCard />; // good const reservationItem = <ReservationCard />;
-
Component Naming: Use the filename as the component name. For example, ReservationCard.tsx should have a reference name of ReservationCard. However, for root components of a directory, use index.tsx as the filename and use the directory name as the component name:
// bad import Footer from './Footer/Footer'; // bad import Footer from './Footer/index'; // good import Footer from './Footer';
Always use camelCase for others.
- scripts
- folders
- variables
- functions
- Framework: Next.js
- State Management: React Query, Context API
- Styling: Chakra-ui, Emotion
- Forms: React Hook Form
- Testing: Cypress