Curriculum FE Next.js

Welcome to the Curriculum FE Next.js repository! This curriculum is designed to onboard new employees efficiently and help them ramp up on the tools, technologies, and workflows used in our organization. The focus is on building a solid understanding of Next.js and the front-end development practices we follow.

---

Table of Contents

1. Overview
2. Getting Started
3. Repository Structure
4. Onboarding Curriculum
5. Learning Objectives
6. Contributing
7. Support

---

Overview

This repository serves as the primary resource for onboarding new front-end engineers. It contains:

• Interactive learning modules.
• Project-based tasks to reinforce learning.
• Best practices for working with Next.js and our tech stack.
• Hands-on exercises to familiarize new hires with the workflows and coding standards.

By completing this curriculum, new employees will:

• Gain confidence in working with Next.js.
• Understand our front-end development processes.
• Be equipped to contribute to production code.

---

Getting Started

1. Clone the Repository

   git clone https://github.com/telkomdev/curriculum-fe-nextjs.git
   cd curriculum-fe-nextjs

2. Install Dependencies

   Ensure you have Node.js and npm installed. Then, run:

   npm install

3. Run the Curriculum

   Launch the curriculum locally:

   npm run dev

   Access the curriculum at http://localhost:3000.

---

Repository Structure

curriculum-fe-nextjs/
├── public/               # Static assets (images, etc.)
├── src/
│   ├── components/       # Reusable UI components
│   ├── modules/          # Curriculum-specific modules
│   ├── pages/            # Next.js pages
│   ├── styles/           # Global and module-specific styles
│   ├── utils/            # Utility functions
├── .env.example          # Example environment variables
├── README.md             # Project documentation
├── package.json          # Project metadata and dependencies
└── next.config.js        # Next.js configuration

---

Onboarding Curriculum

The curriculum is divided into the following modules:

1. Introduction to Next.js

   • What is Next.js?
   • Key features and benefits.

2. Project Setup and Configuration

   • Setting up a Next.js project.
   • Understanding project structure and configurations.

3. Routing and Navigation

   • Pages and dynamic routing.
   • API routes in Next.js.

4. State Management

   • Local state with React.
   • Global state management strategies.

5. Styling

   • CSS Modules.
   • TailwindCSS (if applicable).
   • Best practices for styling components.

6. Data Fetching

   • getStaticProps, getServerSideProps, and getStaticPaths.
   • Client-side data fetching.

7. Performance Optimization

   • Image optimization.
   • Code splitting and lazy loading.

8. Deployment

   • Deploying a Next.js application to production.

Each module includes:

• Reading materials.
• Coding exercises.
• A mini-project to practice concepts.

---

Learning Objectives

By the end of the curriculum, participants will:

• Understand the core principles of Next.js.
• Be able to build scalable, performant front-end applications.
• Write clean, maintainable, and reusable code.
• Follow best practices in front-end development and our team’s standards.

---

Contributing

Contributions to this repository are welcome! If you have suggestions for improving the curriculum:

1. Fork the repository.
2. Create a new branch.
3. Make your changes.
4. Submit a pull request with a clear description of your updates.

---

Support

If you encounter any issues or have questions:

• Check the Issues section for existing discussions.
• Reach out to the onboarding team via Slack or email.

Happy learning! 🎉