next13-starter
v1.0.11
Published
Start a Next13 Zustand TypeScript project in few second!
Downloads
391
Maintainers
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
npx next13-starter my-project
cd my-project
2) Run Project
npm run dev
3) Run Deploy
npm run build
Using with Store
// user store
import { useDataStore } from '@store/index';
const { data, setData } = useStore();
Using with Mixin
// 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)};
`