Pada kesempatan kali ini saya akan membagikan tutorial cara membuat Dark Mode menggunakan Tailwind CSS dan React JS (Next JS). sebelmunya pastikan kalian sudah menginstall NextJS dan juga Tailwind CSS atau kalo belum, silahkan lihat tutorial [Install Project NextJS dan Tailwind CSS](https://www.jejakcoding.com/tutorial/cara-menginstall-project-nextjs-typescript-dan-tailwindcss).

Setelah menginstall Project Next JS dan Tailwind CSS selanjutanya kita akan sedikit menambahakan code ke dalam file "config.tailwind.js"

```javascript
module.exports = {
  darkMode: "class",
  // ...
}
```

Untuk full code menjadi seperti dibawah ini

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

untuk menambahkan Dark Mode kita hanya menambahkan class "dark" pada element paling atas di dalam tag HTML misalnya "body" atau element "div" yang heirarkinya berada di posisi paling atas.

```html
<div className="dark">
  <head>
    <title>Create Next App</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" />
  </head>
  <div className="my-6">
    <button
      className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600"
    >
      Example Button
    </button>
  </div>
</div>
```

kemudian untuk membuat element dark mode kita bisa menggunakan

```
dark:
```

contoh kita akan membuat button normal dengan warna sky dan text warna putih

```html
<button
  className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600"
>
  Example Button
</button>
```

agar button berubah warna pada saat dark mode maka akan menjadi seperti

```html
<button
  className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white"
>
  Example Button
</button>
```

Supaya setingan Dark Mode tersimpan di browser kita akan menggunakan [React Cookie](https://www.npmjs.com/package/react-cookie) untuk menyimpannya. kita juga akan menggunakan [React Icons](https://react-icons.github.io/react-icons/).

#### Install React Cookie & React Icons

buka terminal dan masukan perintah

```
yarn add react-icons
yarn add react-cookie
```

atau

```
npm add react-icons
npm add react-cookie
```

kemudian edit halaman "index.jsx" menjadi

```tsx
import type { NextPage } from "next"
import Head from "next/head"
import { useCookies } from "react-cookie"
import { BsFillSunFill, BsFillMoonStarsFill } from "react-icons/bs"

const Home: NextPage = () => {
  const [cookies, setCookie, removeCookie] = useCookies(["dark"])

  const setDark = () => {
    if (cookies.dark == "yes") {
      setCookie("dark", "no")
    } else {
      setCookie("dark", "yes")
    }
  }

  return (
    <div className={cookies.dark == "yes" ? "dark" : ""}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="dark:bg-gray-600 h-screen">
        <div className="my-6">
          <button
            className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white"
            onClick={setDark}
          >
            {cookies.dark !== "yes" && <BsFillSunFill size={18} />}
            {cookies.dark == "yes" && <BsFillMoonStarsFill size={18} />}
          </button>
        </div>
      </div>
    </div>
  )
}

export default Home
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656827070/jejakcoding/Tutorial/Next%20JS%20Dark%20Mode/QDrp1xF_cos834.png)

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656827136/jejakcoding/Tutorial/Next%20JS%20Dark%20Mode/EwcC6Q5_yk7geh.png)

Repository bisa di diwnload di:

<https://github.com/jejakcoding/example_nextjs_tailwind>


Kali ini saya akan berbagi tutorial membuat Dark Mode atau
  Mode malam pada NextJS menggunakan Tailwind CSS & React Cookie

large_next_bwj5ja.png

medium_next_bwj5ja.png

small_next_bwj5ja.png

thumbnail_next_bwj5ja.png

next_bwj5ja.png

Membuat Dark Mode atau Mode malam pada NextJS menggunakan Tailwind CSS &   React Cookie

Kali ini saya akan membagikan tutorial cara menginstall project NextJS dengan template Typescript dan tailwindcss dengan mudah.

[NextJS](https://nextjs.org) adalah salah satu framework untuk ReactJS yang banyak digunakan olah banyaj kalangan dan perusahaan karena kemudahan dan struktur yang mudah untuk dipelajari. untuk menggunakan NextJS pastikan kalian sudah mengetahui dan memahami ReactJS terlebih dahulu karena pada dasarnya NextJS sebagian besar adalah ReactJS.

Untuk menginstall NextJS ada beberapa yang perlu di persiapkan terlebih dahulu

Prerequisite:

- NodeJS
- NPM / Yarn
- ReactJS

Pastikan kalian sudah menginstall NodeJS terlebih dahulu dan NPM atau Yarn.

Untuk menginstall NextJS jalankan perintah

```
npx create-next-app@latest --ts
```

Kemudian ikuti dan masukan nama project seuai dengan keinginan kita. misal "LatihanNext"

tunggu sampai proses installasi selesai . untuk menjalankan kita bisa menggunakan perintah

```
yarn dev
```

atau

```
npm run dev
```

#### Install TailwindCSS di dalam NextJS

masuk ke dalam project NextJS senelumnya

kemudian masukan perintah

```
yarn add  tailwindcss postcss autoprefixer -D
```

atau

```
npm install -D tailwindcss postcss autoprefixer
```

kemudian jalankan perintah

```
npx tailwindcss init -p
```

edit file "tailwind.config.js" menjadi seperti

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

kemudian edit file "styles/globals.css" dan tambahkan

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
```

Proses instalasi sudah selesai dan kita bisa menggunakan class Tailwindcss di dalam component ReactJS

contoh

```html
<button class="bg-sky-500 text-white px-5 py-2 hover:opacity-75">
  My Button
</button>
```

Repository:

https://github.com/jejakcoding/example_nextjs_tailwind


Kali ini saya akan mebagikan tutorial cara menginstall
  project NextJS Typescript dan Tailwindcss dengan mudah

Cara menginstall project NextJS Typescript dan Tailwindcss

Kali ini saya akan berbagi tutorial Redux Toolkit Slice menggunakan framework NextJS

Tutorial Redux Toolkit Slice menggunakan framework NextJS

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

\
Didalam frontend development pada saat ini, kebanyakan framework yang digunakan adalah berbasis component seperti React, Vue, Agular, dan lain - lain. 

\
Component yang dibuat biasanya dibuat untuk digunakan kembali didalam component lain atau sering disebut Reusable Component, sehingga tidak perlu membuat component yang sama secara berulang ulang dan akan menghemat waktu dalam pengembangan selain itu kode program menjadi lebih rapi dan bersih.

\
Dalam satu halaman web atau aplikasi biasanya terdiri dari banyak component yang saling terkait satu sama lain

![OZiOVYv.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/O_Zi_OV_Yv_e44b5bdfbc.png)

\
Pada gambar diatas terlihat didalam satu halaman website memiliki banyak component dan tentunya masing - masing component saling terhubung satu sama lain.

\
**Bagimana caranya antar component saling  terhubung dan berbagi data atau informasi?**

\
Biasanya didalam framework seperti React  atau Vue sudah menyediakan mekanisme yang digunakan untuk mengirim atau menerima informasi antar component yang sering disebut Props.

![Vm65O3Y.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Vm65_O3_Y_100498eaf2.png)

\
Pada gambar diatas adalah bagaimana cara kerja props, dimana kita bisa berbagi data kepada setiap component yang dituju. 

\
**Apakah props menyelesaikan masalah?** jawabanya adalah Ya. namun bagaimana jika terdapat banyak component? puluhan, bahkan lebih.

\
Jika terdapat banyak component saya rasa menggunakan props akan sangat rumit dan membutuhkan effort yang sangat banyak karena kita akan berinteraksi secara langsung dengan component yang dituju.

\
**Solusinya dalah dengan menggunakan State Management**

\
Dengan bantuan State Management kita akan lebih mudah dalam berbagi data atau informasi ke masing - masing component yang terkait tanpa harus berinterak si terhadap component secara langsung.

\
![6MEdqeB.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/6_M_Edqe_B_462b575c9f.png)

\
**Contoh state management yang sering dipakai**

- Redux
- Recoil
- Pinia
- Vuex
- Ngxs
- MobX

State management adalah teknik yang digunakan untuk mengelola, menyimpan, dan mengakses data atau informasi secara terpusat supaya mudah dalam mengontrol data atau informasi yang dibutuhkan.

large_lEOPl1P.png

medium_lEOPl1P.png

small_lEOPl1P.png

thumbnail_lEOPl1P.png

lEOPl1P.png

Mengenal State Management dan Kegunaanya untuk Frontend Developent

Pertama install Next JS terlebih dahulu.

Jalankan perintah

```
npx create-next-app@latest
```

\
Lalu isi nama project dengan nama misalnya "next-https"

\
Kemudian masuk kedalam project lalu jalankan perintah

```
yarn dev
```

\
Lalu buka browser untuk memastikan

\
![h7XmUpL.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/h7_Xm_Up_L_bd293ddbe6.png)


\
Untuk menjalankan dengan HTTPS caranya cukup mudah, jalankan perintah

```
yarn dev --experimental-https
```

\
Kemudian buka browser dan gunakan https

\
![80JWiiW.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/80_J_Wii_W_725dcc2b82.png)

Pada tutorial kali ini saya akan membagikan cara mudah menjalankan Next JS dilocalhost dengan Https

medium_MeHEBzF.png

small_MeHEBzF.png

thumbnail_MeHEBzF.png

MeHEBzF.png

Menjalankan Next JS dengan HTTPS di Localhost

Pada tutorial kali ini, kita akan belajar bagaimana melakukan Dockerize aplikasi Next JS dengan mode Standalone.

&nbsp;
### Apa itu mode standalone?

\
Mode standalone adalah proses build next js dimana akan mengoptimalkan hasil build dengan membuang node_modules dan hanya menggunakan library yang dibutuhkan saja dan di convert menjadi static file.

\
Dengan menggunakan standalone ukuran aplikasi akan menjadi lebih kecil sampai 80%

\
Jika kita ingin menjalankan aplikasi Next JS kita sebagai container maka menggunakan mode standalone akan sangat membantu mengurangi size dari container.

&nbsp;
### Install Next JS

\
Kita akan menginstall Next JS terlebih dahulu, jalankan perintah dibawah dan buat nama project misalnya "next-standalone"

&nbsp;
```shell
npx create-next-app@latest

```

\
Lalu masuk kedalam folder "next-standalone" kemudian edit file **next.config.js** tambahkan output

&nbsp;
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
};

export default nextConfig;

```

\
Kemudian buat file Dockerfile

```shell
FROM node:18-alpine AS base

 
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
# Set working directory
WORKDIR /app
COPY . .
 
# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/package.json .
RUN yarn install
 
# Build the project
COPY --from=builder /app/ .
RUN yarn build
 
FROM base AS runner
WORKDIR /app
 
 
# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/next.config.mjs .
COPY --from=installer /app/package.json .
# COPY --from=installer /app/.env.production .
 
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=installer --chown=nextjs:nodejs /app/public ./public

EXPOSE 3000

CMD node server.js 
```

\
Kemudian jalankan perintah


```shell
docker build -t next-standalone .
```

\
Setelah berhasil, kemudian testing dengan menjalankan perintah

```shell
docker run -it --rm -p 3000:3000 next-standalone
```

\
Kemudian akses broswer http://localhost:3000

![next.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/next_fecc7b40c4.png)

\
Berikut ini perbandingan ukuran container jika tanpa mode standalalone dan menggunakan mode standalone:


```shell
| No Standalone  |  With Standalone Mode |
| 500MB  |  100MB |
```

\
Ukuran diatas hanya perbandingan next js tanpa menggunakan library tambahan seperti Chakra UI, Taildwind CSS

Dockerize aplikasi Next JS dengan Mode Standalone dengan ukuran yang lebih kecil

Kelas Terbaru