Next.js เขียนยังไง เริ่มยังไง มาดูกันเลย

npx create-next-app@latest

What is your project named?...bmi-calculator-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

const CardLayout = ({ children }) => {
    return (
       <div className="w-full max-w-3xl overflow-hidden rounded-xl 
bg-[#FFFADD] shadow-lg">
        <div className="px-4 pyy-5 sm:p-6">{children}</div>
       </div>
    );
};

export default CardLayout;

'use client';
import { useState, useEffect } from 'react';

import Height from './Height';
import Weight from './Weight';
import ResultCard from './ResultCard';

const BmiForm = () => {
    const [ height, setHeight ] = useState(0);
    const [ weight, setWeight ] = useState(0);
    const [bmi, setBmi] = useState(0);
    const [category, setCategory] = useState('');

    const handleReset = (e) => {
        e.preventDefault();
        setHeight(0);
        setWeight(0);
        setBmi(0); 
        setCategory(''); 
    };

    useEffect(() => {    
        if (height > 0 && weight > 0) {
            const calculatedBmi = (weight / ((height / 100) * (height / 
100))).toFixed(1);
            console.log('Calculated BMI:', calculatedBmi);
            setBmi(calculatedBmi);
    
            if (calculatedBmi < 18.5) {
                setCategory('Underweight');
            } else if (calculatedBmi >= 18.5 && calculatedBmi <= 24.9) {
                setCategory('Normal weight');
            } else if (calculatedBmi >= 25 && calculatedBmi <= 29.9) {
                setCategory('Overweight');
            } else if (calculatedBmi >= 30) {
                setCategory('Obesity');
            }
        } else {
            setBmi(0); 
            setCategory('-'); 
        }
    }, [height, weight]);
    

    return (
        <form className="mx-auto grid max-w-6xl gap-y-5 lg:grid-cols-2 lg:gap-x-8">
            <div className="flex flex-col gap-y-8 py-5 lg:px-5 lg:py-6">
                <Height height={height} setHeight={setHeight}/>
                <Weight weight={weight} setWeight={setWeight}/>
            </div>

            <ResultCard bmi={bmi} category={category} reset={handleReset}/>
        </form>
    );
};

export default BmiForm;

import CardLayout from '@/app/components/CardLayout'
import BmiForm from '@/app/components/BmiForm'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-5 lg:p-24">
      <h1 className="my-14 text-center text-3xl font-bold uppercase 
tracking-widest">BMI Calculator</h1>
      <CardLayout>
        <BmiForm />
      </CardLayout>
    </main>
  );
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  background: #FFCC70;
}

const Height = (props) => {
    const { height, setHeight } = props;
  
    return (
      <div>
        <label
          htmlFor="height"
          className="block font-serif text-lg font-light leading-6 text-gray-800"
        >
          Height
        </label>
  
        <div className="relative mt-2 rounded-md shadow-sm">
          <div className="pointer-events-none absolute inset-y-0 right-6 
flex items-center pl-3">
            <span className="text-gray-500 sm:text-sm">Cm</span>
          </div>
  
          <input
            type="number"
            name="height"
            id="height"
            className="block w-full rounded-md border-0 py-1.5 pl-5 pr-2 
text-gray-900 outline-none ring-1 ring-inset ring-gray-300 
placeholder:text-gray-400 focus:ring-2 focus:ring-inset 
focus:ring-cyan-500 sm:text-sm sm:leading-6"
            placeholder="0.00"
            aria-describedby="height"
            value={height}
            onChange={(e) => setHeight(e.target.value)}
          />
        </div>
      </div>
    );
  };
  
  export default Height;

cconst ResultCard = (props) => {
    const { bmi, category, reset } = props;

    const data = [
        {
            label: 'Your BMI is',
            value: bmi
        },
        {
            label: 'Result:',
            value: category
        }
    ];

    return(
        <div className="flex flex-col justify-between rounded-xl 
bg-[#FFC436] p-5 lg:py-10">
            <div className="flex flex-col gap-y-8">
                {data.map((item, i) => (
                    <div key={i} className="flex items-end justify-between">
                        <div>
                            <p className="text-[#3C4048] text-lg 
font-bold">{item.label}</p>      
                        </div>
                        <div className="flex items-baseline gap-x-2">
                            <span className="text-2xl font-bold text-[#3C4048]">
                                {item.value}
                            </span>
                        </div>
                    </div>
                ))}
            </div>

            <button
                type="submit"
                className="mt-14 w-full rounded-md bg-[#FFFADD] px-3.5 
py-2.5 text-lg font-semibold uppercase text-black shadow-sm 
hover:bg-cyan-100 focus-visible:outline focus-visible:outline-2 
focus-visible:outline-offset-4 focus-visible:outline-white"
                onClick={(e) => reset(e)}
            >
                Reset BMI
            </button>
        </div>
    );
};

export default ResultCard;