POV: Serious la Next.js boleh buat semua ni

@hafizshaharill

4.8K followers · usually 3.2K views a post

Views

49.8K

Likes

4.8K

Comments

160

Shares

370

SoundTikTok sound · original sound - hafizshaharill

Promoted product

Next.js

Next.js by Vercel is the full-stack React framework for the web.

2 videos2 creators

Why it worked

The video effectively breaks down a complex topic (web development with Next.js) into a clear, step-by-step visual explanation. It uses a diagram to illustrate the workflow, making it easy to understand and follow, which appeals to beginners and experienced developers alike.

Summary

The video explains how Next.js can be used for web development, covering both front-end and back-end aspects. It demonstrates a workflow from coding to deployment on Netlify via GitHub, and how to integrate with Supabase for backend services and mobile app access.

Structure

1Introduction to Next.js for web development
2Front-end capabilities with HTML, CSS, JS, React, and Tailwind
3Back-end capabilities with API creation and database integration (Supabase)
4

Original caption

#webdevelopment pakai ni je setel dari zero sampai deploy.. 😮‍💨

More from @hafizshaharill

Product placement

Next.js ACTS - it is a web development framework that allows for building both front-end and back-end components. Removing it would change the entire structure of the video. GitHub ACTS - it is a platform where code is pushed and deployed. Removing it would change the deployment process shown. Netlify ACTS - it is a platform where code is auto-deployed. Removing it would change the deployment process shown. Supabase ACTS - it is a database service that can be directly accessed for data and authentication. Removing it would change the backend architecture shown.

Call to action

okay cuba korang komen pula step apa yang korang pakai

On-screen text

POV: Serious la Next.js boleh buat semua ni web development Next.js JS ni dia dah ada dah part front end dia dan dia dah ada juga back end dia so dekat front end ni korang boleh buat static website which is dah ada dah dia punya HTML css dan javascript so dari situ juga kita ada framework react dan ada juga tailwind so kat sini aa selesai je kod korang push terus ke github aa kita dah setlah bila dah push gihub dia terus auto deploy kat netify so everyone boleh access lah daripada netify tu so part back end pula kita ada api contohnya kita ada get kita ada post dan another get so dekat sini juga kalau kita tengok back end ni kita boleh aa buat dia direct access ke superbase so kita boleh add authentication juga dekat super base ni so ni kalau kita nak ada detailah jadi daripada react tadi dia akan get the data guna api so daripada Mobile pula kita ada iOS dengan Android pun boleh direct access to the API so senang kan so kita buat sekali boleh access by all the platform so dah siap kita punya basic step for web development okay cuba korang komen pula step apa yang korang pakai

Transcript

web development korang yang baru start nak buat web development tu tak payah pening pening korang guna je next JS ni sebab next JS ni dia dah ada dah part front end dia dan dia dah ada juga back end dia so dekat front end ni korang boleh buat static website which is dah ada dah dia punya HTML css dan javascript so dari situ juga kita ada framework react dan ada juga tailwind so kat sini aa selesai je kod korang push terus ke github aa kita dah setlah bila dah push gihub dia terus auto deploy kat netify so everyone boleh access lah daripada netify tu so part back end pula kita ada api contohnya kita ada get kita ada post dan another get so dekat sini juga kalau kita tengok back end ni kita boleh aa buat dia direct access ke superbase so kita boleh add authentication juga dekat super base ni so ni kalau kita nak ada detailah jadi daripada react tadi dia akan get the data guna api so daripada Mobile pula kita ada iOS dengan Android pun boleh direct access to the API so senang kan so kita buat sekali boleh access by all the platform so dah siap kita punya basic step for web development okay cuba korang komen pula step apa yang korang pakai