nextjs-tutorial

NextJS & Tailwind CSS tutorial

How to Use

1. git clone ~
2. npm i
3. npm run dev

Note

Powered by NextJS & Tailwind CSS & TypeScript

Derived from create-next-app

You have to access the localhost:3000 to see the result

Memo

Before how to use..

nextjs getting started

guide to install tailwindcss in nextjs project

After that.. for svg icon & theme switching

hero icons

Light/dark mode (article by Vikas Rai)

Light/dark mode tailwind css docs (less accurate than previous one, which is funny)

TODO list

Have to do

• Responsive header
• Footer design
• Practice disclosure
• Sidebar
• Make sample articles list
• Go to the top button
• Logo design
• Hightlight the current page's navbar item, make the router
• Search feature (algolia or another version)

Maybe later

• using react-grid-layout (for customizing layout)
• using react-beautiful-dnd (for enhancing user experience of data list management)
• using formik (arguably the most common way to make form)

...