Skip to main content

Basic

TailwindCSS​

  • 在建立nextJS App時已經安裝了tailwindCSS

Routing​

  • 路由功能在NextJS是內建的
  • app底下可以建立資料夾名稱/page.tsx
  • 資料夾名稱就立即成為可以路由的路徑

Git​

  • 先登入github,建立一個private repo
  • 將本地的程式碼上傳到Github備份成private repo
git init 
git add README.md
git commit -m "first commit"
git branch -M main 
git remote add origin https://github.com/weili0505/myapp.git 
git push -u origin main

Install Shadcn/ui​

npx shadcn@latest init -t next
select a component library: base
select preset: Nova (Lucide/ Geist)
  • install all components
npx shadcn add 
click the letter A in the keyboard to SELECT ALL and enter to submit
  • to use the button in page
import {Button} from "@/components/ui/button";

export default const Home()=>{
  return (
    <Button>Click me</Button>
  )
}

Light and Dark mode​

  • install next-themes
npm install next-themes
  • in the layout.tsx file
import { ThemeProvider } from "next-themes";

<body className="min-h-full flex flex-col">
  <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
    {children}
  </ThemeProvider>  
</body>

Install HeroUI​

  • 安裝HeroUI
npm install @heroui/react framer-motion react-icons

-在根目路加入一個檔案hero.ts

// hero.ts
import { heroui } from "@heroui/react";
export default heroui();
  • 然後在/src/app/globals.css 加入以下的文字,NextJS才會知道要使用HeroUI
@import  "tailwindcss";
@plugin  '../../hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source  '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
  • 建立一個component叫做Providers.tsx
'use client';
import { HeroUIProvider } from '@heroui/system';
import {ReactNode} from 'react';
export const Providers = ({children}:{children:ReactNode}) => {
  return (
    <HeroUIProvider>{children}</HeroUIProvider>
  )
}
  • 在layout.tsx將Providers包住children
import { Providers } from "@/components/Providers";
<html lang="en">
    <body>
    <Providers>
      {children}
    </Providers>
    </body>
</html>