똑똑한개발자에서 진행하는 프로젝트의 스타터 프로젝트 next-init 2.0입니다.
Use this template 버튼을 활용해서 프로젝트의 repository를 생성해주세요.
A quick look at the directories you'll see in this project.
├── public #
├── src #
├── apis #
├── components #
├── common #
├── HomePage #
├── ExamplePage #
├── constants #
├── features #
├── generated #
├── pages #
├── scripts #
├── styles #
├── utils #
├── 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, Chakra-ui theme configuration files are placed into this folder.
.
├── ...
├── styles
│ ├── theme
│ └── index.ts
│ └── styles.ts
│ └── textStyles.ts
└── ...
Api call related functions.
.
├── apis
│ ├── _axios
│ └── instance.ts
│ └── useCustomInstance.ts
│ ├── auth
│ ├── example
│ ├── theme
└── ...
Components are independent and reusable bits of code.
.
├── ...
├── components
│ ├── common
│ ├── @Icons
│ ├── @Layout
│ ├── Select
│ ├── Calendar
│ └── ...
│ ├── elements
│ ├── hooks
└── ...
Custom hook allows you to extract some components logic into a reusable function that starts with use and that call can other hooks.
.
├── ...
├── components
│ ├── common
│ ├── elements
│ ├── hooks
│ ├── useSize.ts
└── ...
Small snippets you can use throughout the application. Short and specific functions and constants used throughout application.
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
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'; // 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'; ```# ⭐️ Stack
-
Framework: Next.js
-
State Management: React Query, Redux Toolkit
-
Forms: React Hook Form