Next.js를 React로 바꿔보자(Link, DarkMode)

* Link 부분

● Next.js

next : import Link from "next/link" 선언 후 <Link>링크주소</Link>

● React

react : react-router-dom 사용, index.tsx(<App/> 있는 곳)에서 BrowserRouter로 <App/>를 감싸야 함

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom'
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";


ReactDOM.render(
  <BrowserRouter>
  <App />
  </BrowserRouter>,
  document.getElementById('root') as HTMLElement
);

reportWebVitals();

* darkMode 부분

▶ 참고 : react에서 tailwindcss darkmode 적용(영어 블로그)

● Next.js

[styles/globals.css -> tailwindcss 설정]

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

[tailwind.config.js]

▶ darkMode: "class"가 들어가야 제대로 darkMode를 적용할 수 있음

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  variants: {
    extend: {
      boxShadow: ["dark"],
    },
  },
  plugins: [],
};

[components/Sidebar.tsx -> darkMode 적용시키는 버튼]

▶ useTheme 사용
-> dark와 light를 쉽게 적용, 테마 변경시 깜박임 사용 안 함

import { useTheme } from 'next-themes'

const Sidebar = () => {
  const {theme, setTheme} = useTheme()

    const changeTheme = () => {
        setTheme(theme === "light" ? "dark" : "light")
    }
	(
    	  <button 
            onClick={changeTheme}
            className="w-8/12 py-2 my-2 rounded-full bg-gradient-to-r from-dark-blue to-light-beige dark:from-dark-red dark:to-light-beige dark:text-black">
                Change Theme
            </button>
    )
}
export default Sidebar;

[pages/_app.tsx]

▶ ThemeProvider로 해당 컴포넌트를 감싸야 함

import { ThemeProvider } from 'next-themes'
import Sidebar from '@/components/Sidebar'

export default function App({ Component, pageProps, router }: AppProps) {
  return(
    <ThemeProvider attribute='class'>
      <Sidebar />
 	</ThemeProvider>
  )
}

● React

[src/index.css -> tailwindcss 설정]

@tailwind base;
@tailwind components;
@tailwind utilities;
.dark {
    width: 100%;
    background-color: black;
    color: white;
 }
 .light {
    width: 100%;
    background-color: #6096B4;   
    color: black;
 }

[tailwind.config.js]

▶ darkMode: "class"가 들어가야 제대로 darkMode를 적용할 수 있음

/** @type {import('tailwindcss').Config} */
module.exports = {
  content:  ["./components/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class",
  variants: {
    extend: {
      boxShadow: ["dark"],
    },
  },
  plugins: [],
};

[components/DarkmodeToggle.tsx]

▶ darkmode와 setDarkMode를 가져옴

import React, { FunctionComponent } from 'react';

const DarkModeToggle:FunctionComponent<{
    darkMode: boolean;
    setDarkMode:React.Dispatch<React.SetStateAction<boolean>>;
}> = ({ darkMode, setDarkMode }) => {
   return (
      <button
         className={`w-8/12 py-2 my-2 rounded-full bg-gradient-to-r from-dark-blue to-light-beige dark:from-dark-red dark:to-light-beige dark:text-black ${darkMode ? 'active' : ''}`}
         onClick={() => setDarkMode(!darkMode)}
         >
         {darkMode ? 'Change Light Mode' : 'Chnage Dark Mode'}
      </button>
   );
}
export default DarkModeToggle;

[src/App.tsx]

import React, { useState } from 'react';
import "./index.css";
import DarkModeToggle from './components/DarkmodeToggle';

const App = () => {
 const [darkMode, setDarkMode] = useState(false);
	return (
    	   <DarkModeToggle  darkMode={darkMode} setDarkMode={setDarkMode} />
    )
}
export default App;