Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryan-ahn/npm-next13-starter
🧩 Next13 프로젝트 시작을 위한 보일러플레이트
https://github.com/ryan-ahn/npm-next13-starter
eslint-rules nextjs prettier-config typescript zustand
Last synced: about 2 months ago
JSON representation
🧩 Next13 프로젝트 시작을 위한 보일러플레이트
- Host: GitHub
- URL: https://github.com/ryan-ahn/npm-next13-starter
- Owner: ryan-ahn
- License: mit
- Created: 2023-10-18T02:44:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-06T01:08:20.000Z (10 months ago)
- Last Synced: 2024-03-06T05:42:00.687Z (10 months ago)
- Topics: eslint-rules, nextjs, prettier-config, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 270 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ryan's Next13 Awesome Starter
## Features
- [x] ⚙️ Small & Fast Bundler (Turbo)
- [x] 🗝️ Typed Programming (Typescript)
- [x] 🧩 SSR & Page Transition (Next13)
- [x] 🕋 Simple Store (Zustand)
- [x] 📙 Code Formatter (ESLint Airbnb & Prettier)
- [x] 🧵 Built-in Component & Layout
- [x] 🚰 Handle Page to Middleware
- [x] ✨ Setting Reset Style
- [x] ⚡️ Setting Mixin Style
- [x] 📍 Absolute Path
- [x] 📫 Page SEO
- [ ] 🪄 Dark Mode
- [ ] 📱 Check Device
## Frameworks
- **Bundler** : Turbo
- **SSR** : Next13
- **Core** : React18
- **Store** : Zustand
## Code Structure
- **Static(public)**
- **Root(app)**
- ⎣ **components** - atomic stateless components
- ⎣ **config** - configure
- ⎣ **constants** - static data
- ⎣ **containers** - stateful components
- ⎣ **interface** - interfaces
- ⎣ **libs** - store, hooks, utils
- ⎣ **styles** - style set
## Getting Started
### 1) Installation
```shell
npx next13-starter my-project
cd my-project
```
### 2) Run Project
```shell
npm run dev
```
### 3) Run Deploy
```shell
npm run build
```
## Using with Store
```javascript
// user store
import { useDataStore } from '@store/index';
const { data, setData } = useStore();
```
## Using with Mixin
```javascript
// use mixin
import { flexSet, boxSet, colorSet, backgroundSet, fontSet } from '@styles/mixin';
const Style = styled.div`
// flex set(justify-content, align-items, flex-direction)
${() => theme.flexSet('center', 'center', 'column')};
// box set(width, height, border-radius)
${() => theme.boxSet('00px', '00px', '00px')};
// color set(color, background-color)
${() => theme.colorSet('white', 'black')};
// background set(url, object-fit)
${() => theme.backgroundSet('URL','contain')};
// font set(font-size, font-weight, line-height)
${() => theme.fontSet(00, 000, 00)};
`
```