Ryan's Next13 Awesome Starter

Features

• ⚙️  Small & Fast Bundler (Turbo)
• 🗝️  Typed Programming (Typescript)
• 🧩  SSR & Page Transition (Next13)
• 🕋  Simple Store (Zustand)
• 📙  Code Formatter (ESLint Airbnb & Prettier)
• 🧵  Built-in Component & Layout
• 🚰  Handle Page to Middleware
• ✨  Setting Reset Style
• ⚡️  Setting Mixin Style
• 📍  Absolute Path
• 📫  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)};
`