Persiapan bahan belajar next js

Summary

In this tutorial, learners are guided through the process of downloading and modifying an HTML template from the Sinakit website. The HTML template is then integrated into a NextJS project, with an emphasis on the potential for back-end integration and database use. The instructor encourages participants to use Visual Studio Code for editing and introduces tools like Live Server for testing. The session covers the basics of setting up the project and transforming the static HTML into a dynamic NextJS format. A group discussion is encouraged for any questions or difficulties encountered during the learning process.

Takeaways

• 😀 Visit sinakit.com to access free HTML templates for your project.
• 😀 You can sign up for a free account on sinakit.com to download templates.
• 😀 After logging in, search for HTML templates, such as 'Office' for your project.
• 😀 Download the template in HTML format, with an option to choose a free trial or paid version.
• 😀 Use a code editor like Visual Studio Code (VS Code) to work with the HTML template.
• 😀 You can install the Live Server extension in VS Code to view the live preview of your template.
• 😀 The template comes with multiple pages and built-in CSS, but uses CSS output rather than Tailwind CSS.
• 😀 The downloaded template includes a carousel, available office listings, and details of each office.
• 😀 The template features a 'full book' option, which cannot be booked and contains additional information.
• 😀 The goal is to convert the static HTML template into a NextJS project to integrate data from a backend database.
• 😀 If you're new to NextJS, you can take a free class on platforms like Bitwi Tangga or learn directly from this course.

Q & A

What is Sainakit.com and what does it offer?

Sainakit.com is a website that provides several free and high-quality templates for various projects, such as website design, mobile illustrations, and HTML templates.

What is the first task in the class described in the script?

The first task is to download an HTML template from Sainakit.com, specifically an office template, which will be used for a project in the NextJS class.

How do you download the HTML template from Sainakit?

To download the HTML template, you need to create a free account on Sainakit.com, log in, search for the desired template (e.g., 'Office'), and then choose either a free trial or a paid option to begin the download.

Which code editor is suggested for this project, and why?

Visual Studio Code (VS Code) is suggested because it is free, available on multiple operating systems, and provides the features necessary for this kind of web development project.

What is the purpose of using the Live Server extension in VS Code?

The Live Server extension in VS Code allows you to view changes made to the HTML template in real-time in a browser, making it easier to see the front-end development progress as you work.

What does the 'Full Book' page show in the template?

The 'Full Book' page in the template displays information about an office that is no longer available for booking, contrasting with the 'Available' office listings, which can still be booked.

Why is the HTML template being converted to NextJS?

The HTML template is being converted to NextJS to enable the use of dynamic data from a backend database, moving away from static HTML to a more interactive and data-driven application.

What is NextJS and how does it relate to ReactJS?

NextJS is a popular framework built on top of ReactJS that enhances its capabilities for building full-fledged web applications, offering features like server-side rendering and easier data fetching.

Is there any prior knowledge required to follow the NextJS class in this lesson?

No prior knowledge of NextJS is required to follow this class. However, those new to NextJS are encouraged to check out free resources or classes, such as the ones offered at Bitwi Tangga, before starting the project.

What should students do if they encounter difficulties during the learning process?

If students experience difficulties, they are encouraged to discuss their issues in a provided discussion group or contact the class administrator (BWA) for assistance and group access.