Cara Gampang Untuk Membuat Layout Responsive Dengan MUI v5 & NextJS v14

Ohhhhh gini caranya

Berawal dari pengalaman interview, terkait pertanyaan teknologi frontend yang pernah dipake apa aja. Ter-mention lah MUI dari tech lead nya, beliau bertanya, “kamu udah pernah pake MUI sebelumnya”, sehingga akhirnya ketika selesai interview, terbesit lah untuk membuat projek baru dengan menggunakan MUI.

Singkatnya, setelah meriset tampilan dari UI nya bagaimana, akhirnya masuk ke tahap slicing. Setalah slicing, kebetulan memang membuat versi layout untuk Desktop View terlebih dahulu.

Bisa dilihat, problemnya disini itu apa. Saya menemukan masalah yang sama di stackoverflow. ternyata memang karena masalah re-render, berbagai cara sudah dilakukan, merujuk pada dokumentasinya, sampai ketika, saya mencoba untuk merubah pendekatan ketika membuat layout yang responsive, sehingga hasilnya seperti dibawah ini

Permasalah Applying style atau Flash Problem nya sudah teratasi, dengan menuliskan Breakpoints nya itu seperti ini

return (
  <Box maxWidth="md" margin="0 auto">
      <Box display="flex" alignItems="center" marginTop={5} sx={{ justifyContent: { xs: "center", md: "space-between" }, flexDirection: { xs: "column", md: "row" }, gap: { xs: 4, md: 0 } }}>
        <CompanyCard />
        <ApplyJobCard />
      </Box>
      <JobTabs />
    </Box>
  );
}

Sekian tulisan hari ini, terimakasih 😁