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

large_next_bwj5ja.png

medium_next_bwj5ja.png

small_next_bwj5ja.png

thumbnail_next_bwj5ja.png

next_bwj5ja.png

Tutorial Redux Toolkit Slice menggunakan framework NextJS

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