Kick off your project with this boilerplate.
git clone https://github.com/TokTokHan/next-init-2.0.git <Project Name>
cd <Project Name>
yarn install
yarn run dev
your 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 #
βββ 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 # μμ΄μ½~
β βββ @Layout # λ μ΄μμ~
β βββ Select #
β βββ Calendar #
β βββ ... #
βββ ...
Components are independent and reusable bits of code.
.
βββ ...
βββ containers # containersμ νμ ν΄λλ€μ pagesμ 1:1 맀μΉ
β βββ login #
β β βββ _fragments # _fragmentλ Login νμ΄μ§μμλ§ μ¬μ©λλ μ»΄ν¬λνΈ
β β β βββ LoginForm.tsx # μ€λ³΅λλ κ²½μ°μλ components ν΄λλ‘ μ΄λ
β β β βββ Intro.tsx #
β β βββ Login.tsx #
β β βββ LoginContainer.tsx # LoginContainer μμ λͺ¨λ λ‘μ§μ λν λΆλΆλ€ μμ
(state, props)
β β βββ index.tsx #
β βββ home #
β βββ ... #
βββ ...
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 #
β βββ ...
βββ ...
Generated files such as apis, components, ...
.
βββ ...
βββ generated If you run generate-script, it will be created
β βββ apis # by swagger-typescript-api
β βββ mock # by orval
βββ ...
- generate apis
-
set config about gen_api on your .env
-
script
npm(or yarn) run gen:api
-
usage mock data
mock-data-path: /generated/mock/[filename].msw mock-data: Use Function "~Mock" network-mocking: Use function "~MSW" and set on "_App.ts"
mock-data by orval, faker, msw api-data by swagger-typescript-api
Automated tests with cypress.
.
βββ ...
βββ cypess #
β βββ fixtures # Fixed data sets
β βββ integration # End-to-end, integration tests (alternatively `e2e`)
β βββ plugins #
β βββ support #
βββ ...
there is useful scripts in package.json
- yarn run gen:api
- swagger => axios-api, react-hook, mock-data
- yarn run gen:icon
- svg => chakra-icon
see more README.md
-
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'; / import ReservationCard from './ReservationCard'; // const ReservationItem = <ReservationCard />; // g 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