Forem: Itself Tools

Styling Buttons with styled-jsx in Next.js

Antoine — Tue, 02 Jul 2024 10:00:39 +0000

In our ongoing journey at itselftools.com, where we've developed over 30 projects using Next.js and Firebase, we've encountered and implemented a variety of ways to style applications effectively. One of the tools we frequently utilize in our Next.js projects for component-level styling is styled-jsx. This powerful CSS-in-JS library is tailor-made for Next.js and provides scoped styles without sacrificing performance. In this article, we will explore how to style a button using styled-jsx.

Code Explanation

To understand how styled-jsx works and how it can be applied to style a simple UI element like a button, let's look at the following code snippet:

import StyleSheet from 'styled-jsx/css'
export const buttonStyle = StyleSheet\
button {
  background-color: #0070f3;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

Breakdown

Importing styled-jsx: We start by importing StyleSheet from styled-jsx/css, which is a module dedicated to defining scoped CSS styles.
Defining Styles: The buttonStyle constant is where the CSS for a button is defined. Here’s what each property does:
- background-color: Sets the button's default background color to a vivid blue (#0070f3).
- border: Removes any border from the button, making it look cleaner.
- color: Ensures that the text inside the button is white for better readability against the blue background.
- padding: Adds padding inside the button for a better user interface.
- border-radius: Rounds the corners of the button to give it a modern look.
- cursor: Changes the cursor to a pointer when hovering over the button, indicating it's clickable.
- :hover: A pseudo-class that changes the button's background color to a darker blue (#0056b1) when the mouse hovers over it.

Practical Application

Using styled-jsx for styling in Next.js not only helps in keeping styles scoped to the component but also precompiles styles to minimize runtime overhead. When you use styled-jsx, styles are injected at runtime and are scoped automatically to the markup rendering them, ensuring that styles do not leak to other elements of the application.

Conclusion

Styled-jsx provides a robust solution for managing CSS in your Next.js apps, ensuring that each component maintains its unique style sandbox. If you're interested in seeing styled-jsx in action, consider visiting some of our applications such as utilizing disposable email services, exploring online word searching tools, or experimenting with tools for screen recording. Each of these tools leverages modern web technologies to enhance user experience and functionality.

Seamlessly Fetch Data in Real-Time with Firebase and React Hooks

Antoine — Mon, 01 Jul 2024 10:00:37 +0000

At itselftools.com, we have gathered a wealth of knowledge from developing over 30 web applications using technologies like Next.js and Firebase. Throughout our journey, we've refined techniques that enhance the efficiency and scalability of apps. Today, I want to share with you a lightweight and effective method for fetching real-time data using Firebase Firestore in a React application through custom React Hooks.

Crucial Code Explanation

import { useEffect, useState } from 'react';
import { getFirestore, collection, onSnapshot } from 'firebase/firewheel';

const useCollection = (collectionName) => {
  const [documents, setDocuments] = useState([]);
  const db = getFirestore();

  useEffect(() => {
    const unsubscribe = onSnapshot(collection(db, collectionName), (snapshot) => {
      const docs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setDocuments(docs);
    });
    return () => unsubscribe();
  }, [collectionName]);

  return documents;
};

export default useCollection;

Breakdown of the Code

useState Hook - We start by defining a state variable 'documents' which will hold our data array.
getFirestore - This initializes a Firestore instance connected to our Firebase project.
useEffect Hook - This React Hook is crucial for managing side effects. Here, it's tailored to listen to a specific Firestore collection. Upon any data updates, the provided callback fires, updating our 'documents' state accordingly.
onSnapshot Listener - A real-time listener setup on the specified Firestore collection. It fetches all documents and updates state whenever there is a change in the collection data.
Cleaning up on unmount - The return function from useEffect handles the cleanup, unsubscribing from the Firestore collection when the component unmounts to avoid memory leaks.

Real-World Application

Integrating this hook into your React app allows for effortless real-time data updates, enabling features such as live dashboards, instant messaging, or any dynamic content that requires data to be in constant sync with the backend.

Conclusion

Utilizing Firebase Firestore with React can significantly streamline how you manage real-time data. To see our code in action, check out how we've used it in our applications such as finding a professional voice recorder, performing an online camera test, or capturing videos quickly with an instant video recorder. These tools showcase the practical application and robustness of integrating Firebase Firestore efficiently in web apps.

Implementing Batch Write Operations in Firestore with Express

Antoine — Sun, 30 Jun 2024 10:00:46 +0000

At itselftools.com, our experience in developing over 30 applications utilizing technologies like Next.js and Firebase has offered us profound insights into efficient data handling and server management. One of the common scenarios we frequently handle in our cloud applications is performing bulk data operations, efficiently and securely. In this article, I'll walk you through how to implement a batch write operation in Firestore using an API route in Express.

Code Overview

Take a look at this essential piece of code:

// API Route to perform a batch write operation in Firestore
app.post('/api/batch-write', async (req, res) => {
  const db = firebase.firestore();
  const batch = db.batch();
  const docs = req.body;
  docs.forEach(doc => {
    const docRef = db.collection('items').doc();
    batch.set(docRef, doc);
  });
  await batch.commit();
  res.status(200).send('Batch write successful');
});

Breakdown of the Code

Creating an Instance of Firestore: The code starts by creating an instance of Firestore database.
Initializing a Batch Operation: We then initialize a batch which is used to accumulate operations that are committed atomically. This helps in reducing network overhead and ensures data integrity during batch processing.
Setting Up Document References: Each document from the request body is processed in a forEach loop. For each document, a new document reference is created in the 'items' collection.
Writing to the Batch: The document is then added to the batch using batch.set(). Thereby preparing all documents to be written in a single transaction.
Committing the Batch: Finally, the batch operations are committed to the database, and upon success, a 200 status message is sent back to the client.

Practical Uses

Batch operations are crucial in scenarios where the application needs to handle large amounts of data simultaneously — for example, when importing data from an external source or when multiple records need to be added or updated at once. This reduces the number of network calls made to the database, thereby enhancing performance and reliability.

Conclusion

Batch writing in Firestore is an essential feature for web applications that require high performance and consistency when handling multiple documents. By using the method described above, developers can enhance their data handling capabilities in Firestore-backed applications.

To see similar code snippets in action, feel free to explore some of our applications: explore audio data on Voice Recorder, test your mic here, or extract files using Online Archive Extracter.

Integrating Custom Fonts Using CSS Modules in Next.js

Antoine — Sat, 29 Jun 2024 10:00:21 +0000

At itselftools.com, we’ve amassed a wealth of knowledge from developing over 30 projects combining the robust capabilities of Next.js and Firebase. In this article, we’ll demonstrate how to effectively integrate custom fonts into your Next.js applications using CSS Modules, enhancing the visual richness and user experience of your sites.

What are CSS Modules?

Before we dive into the nuts and bolts, let's briefly touch on CSS Modules. CSS Modules are a popular approach in the web development community used for styling components. They allow you to write CSS that is scoped locally to the component rather than globally. This means class names and animations are scoped locally by default and do not conflict with other styles in the application.

Using Custom Fonts with CSS Modules in Next.js

To implement custom fonts in your Next.js project, you can follow these steps, which involve using a CSS Module file:

Step 1: Define Your Font-face

In your .module.css file, you will declare your @font-face like this:

.module.css
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/my-font.woff2') format('woff2');
}

This defines the family name of your font and specifies the location and format of the font file, ensuring the browser can correctly load and render it. The woff2 format is often recommended due her

Implementing User Authentication with React Hooks and Firebase

Antoine — Fri, 28 Jun 2024 10:00:32 +0000

At Itself Tools, we've learned a great deal through our journey of developing over 30 dynamic websites using Next.js and Firebase. Today, I'll walk you through an essential piece of functionality if you're considering adding authentication to your React applications: user login using Firebase.

Understanding the Code

Here is the React hook that facilitates user authentication using Firebase Auth:

import { useCallback } from 'react';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const useLogin = () => {
  const auth = getAuth();
  const login = useCallback(async (email, password) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      return userCredential.user;
    } catch (error) {
      console.error('Failed to login', error);
      throw error;
    }
  }, [auth]);

  return { login };
};

export default useLogin;

Step-by-Step Breakdown

Import Necessary Modules: We start by importing useCallback from React, which will help in memoizing the login function to prevent unnecessary re-renderings. Then, we import getAuth and signInWithEmailAndPassword from Firebase, which are essential for authentication processes.
Initialization of Authentication: getAuth() is called to initialize the authentication service from Firebase which provides the context for our operations.
Creating the Login Function: We use the useCallback hook to define our login function. This function is wrapped in a useCallback to ensure it only recomputes if auth changes. Inside, we use the signInWithEmailAndPassword function, passing the auth instance along with the provided email and password.
Error Handling: Our function contains a try-catch block to handle errors effectively. In the event of login failure, the error is logged, and then re-thrown, possibly to be caught by a parent component or error boundary for appropriate handling.
Exporting the Hook: The login method is returned wrapped in an object, making it easily accessible when the hook is used in other parts of the application.

Conclusion

Integrating Firebase with React Hooks like useCallback offers a robust solution for managing user authentication in your React applications. For those interested in seeing this code within a live application, feel free to explore our full-fledged web applications at Find the Right Adjectives, Disposable Email Service, and Pronunciation Dictionary. These platforms further showcase the integration of various web technologies, delivering powerful and practical utilities for everyday use.

Happy Coding!

Leveraging Environment Variables in Next.js for Secure Data Access

Antoine — Thu, 27 Jun 2024 10:00:44 +0000

Here at itselftools.com, with over 30 projects developed using Next.js and Firebase, we've gathered considerable experience regarding efficient and secure web application development. One of the frequent patterns in our projects involves the proper management of sensitive data, particularly how we manage and access environment variables in statically generated pages using Next.js. This post aims to distill this knowledge and share the processes we've honed for handling security considerations effectively.

Understanding Environment Variables in Next.js

Environment variables are essential for keeping certain data non-hardcoded and out of your source code. This could include API keys, database passwords, or private business logic credentials. In a Next.js application, accessing these variables might seem straight-forward, but it requires proper practices to ensure that they are not exposed to the client-side, keeping your app secure.

Example: Secure Access in Static Methods

We specifically use environment variables within server-side functions such as getStaticProps. Here’s a simple snippet to illustrate secure usage:

// Secure environment variable access in static generation methods like getStaticProps in Next.js
export async function getStaticProps() {
  const privateData = process.env.PRIVATE_DATA;
  // Use privateData for server-side computations or fetching server-side only data
  return { props: {} };
}

Explanation

getStaticProps is a static generation method provided by Next.js, primarily used during build time to pre-render pages that fetch data at build time. Here’s how the environment variable PRIVATE_DATA is utilized securely:

Server-side Security: Since getStaticTableProps runs only on the server-side, any data stored in process.env.PRIVATE_DATA remains secure from client-side access. This makes environment variables perfect for sensitive data that should not be publicly accessible.
No Leakage to the Client: The returned props from getStaticProps are sent to the client-side. However, since our private data is not added to the returned props, it remains exclusively on the server-side, ensuring that sensitive information does not leak to the front-end.

Best Practices

While this approach secures sensitive information, best practices around environment variables in a Next.js application include:

Do Not Expose Sensitive Data: Never return sensitive data through props unless it is absolutely necessary and secure.
Use .env Files: Manage your development and production environment variables through separate .env files, enhancing their management and security.
Version Control Safety: Never commit your .env files to your version control system to avert any accidental exposure of your sensitive data.

Conclusion

Securing sensitive data requires attention to detail and mindful development practices. Utilizing techniques like those discussed ensures that your Next.js applications remain robust and secure. If you’re keen to understand these practices further, explore how they’re implemented in our projects such as the high-quality online video recorder, efficient image compression tool, and comprehensive language translator.

With these insights and tools, secure and effective development with Next.js is well within your reach. Keep experimenting, and ensure your applications are secure and efficient!

Implementing Theme-Based Styles in React with Tailwind CSS

Antoine — Wed, 26 Jun 2024 10:00:28 +0000

As web developers at itselftools.com, we've utilized a myriad of tools and technologies to build over 30 innovative web applications using Next.js and Firebase. In this journey, we've harnessed the flexibility of CSS frameworks like Tailwind CSS to enhance user experience with responsive and theme-based designs. Today, I will discuss how to implement theme-based styles in React applications using Tailwind CSS, focusing on switching between light and dark modes.

Understanding the Code Snippet

<div className='dark:bg-gray-900 dark:text-white'>
    <p>This text and background will change based on the theme.</p>
</div>

This simple snippet of code is a powerful example of how Tailwind CSS can be used to conditionally apply styles based on the current theme of the webpage. Here's a breakdown of what each part of the code does:

<div className='dark:bg-gray-900 dark:text-white'>: This div tag contains two Tailwind CSS classes that are prefixed with dark:. This prefix is used by Tailwind CSS to apply these styles when the dark mode is activated on the website.
- bg-gray-900: Sets the background color of the div to a darker shade (gray-900) when dark mode is active.
- text-white: Changes the text color inside the div to white in dark mode.
<p>This text and background will change based on the theme.</p>: Inside the div, we have a paragraph that explains what is happening. This helps in demonstrating the instant change when switching between themes.

Advantages of Theme-Based Styling

Applying theme-based styles can tremendously improve the user experience, offering a visually comfortable environment during different times of the day or according to user preferences. Implementing such features can also elevate the aesthetic appeal and professional look of your applications.

Conclusion

Leveraging Tailwind CSS for theme-based styling in React not only simplifies the development process but also enhances the adaptability of your website. If you'd like to see this code in action, feel free to explore some of our projects like Free Online Mic Tester, Free Online English Word Search Tool, or Disposable Email Service. These tools demonstrate practical applications of dynamic styling based on user-centric design principles.

Tailwind CSS and Next.js have been instrumental in helping us build responsive, theme-aware, and visually engaging applications. We invite you to explore more about our projects and how these technologies are shaping modern web development.

Leveraging Incremental Static Regeneration in Next.js for Dynamic Data Updates

Antoine — Tue, 25 Jun 2024 10:00:35 +0000

As developers at itselftools.com, having built over 30 projects using Next.js and Firebase, we've explored various features of Next.js that significantly better our web development process. One such compelling feature is Incremental Static Regeneration (ISR). This article dives into how ISR can be used to effectively manage static content that requires periodic updates.

Introduction

Next.js is a React framework that enables functionality such as server-side rendering and generating static websites for React based applications. One of the powerful features introduced in more recent versions of Next.js is ISR, which allows you to update static content incrementally after the page has been built, thereby offering a hybrid approach between full static generation and server-side rendering.

Consider the following code snippet that utilizes ISR:

// Using Incremental Static Regeneration in Next.js
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 10 // seconds
  };
}

How ISR Works

The getStaticProps function is part of Next.js's data fetching strategy. Here, fetchData could be any asynchronous function that retrieves data, perhaps from an API or a database. The key part of this snippet is the revalidate property. This property is set to 10, which means that at most every 10 seconds, the data on the page will be regenerated if there are requests coming in.

Essentially, ISR allows you to keep static pages fresh without needing to rebuild them completely each time the data changes. This not only improves the performance by reducing build times but also ensures that the pages serve more up-to-date content.

Advantages of Using ISR

Reduced Build Time: By regenerating only parts of the website as needed, rather than rebuilding the whole site on every change.
Improved Performance: Static pages are served faster compared to traditional server-rendered pages.
SEO Friendly: Static pages generated with ISR are indexed as static by search engines, which can help in better search engine rankings.
Scalability: Handles high traffic efficiently by serving cached content and only regenerating pages periodically or when necessary.

Use Case Scenario

Imagine a news website where the content needs to be updated every few minutes. Using ISR, such a site can maintain static generation benefits while ensuring the content is recent and relevant. The developers can set a suitable revalidate timer to ensure content freshness based on the nature of the data.

Conclusion

Incremental Static Regeneration provides a potent solution for websites that require updated content without the overhead of a full rebuild. It not only enhances performance but also maintains the SEO advantages of static sites. If you want to see how ISR works in real-world scenarios, explore some of our applications developed using this technology, like Find Words Online, Compress Video Online, and Test Your Webcam. See how seamlessly dynamic updates can be handled with ISR, enhancing your web experience.

Implementing Rate Limiting in API Routes with Express and Next.js

Antoine — Mon, 24 Jun 2024 10:00:43 +0000

At Itself Tools, we've honed our skills through the development of over 30 projects combining the robust framework capabilities of Next.js and the versatility of Firebase. Through these experiences, we've accumulated a wealth of practical knowledge especially in ensuring the security and efficiency of our applications. A common challenge faced in web development is preventing API abuse, which can critically impair the availability and performance of your services. This article discusses a strategy for mitigating such issues through rate limiting.

What is Rate Limiting?

Rate limiting is a critical feature for any application that offers APIs. It helps in controlling the number of requests a user can make to an API within a specified time. By doing this, we can prevent abuse and ensure that the service remains available and responsive for all users.

Understanding the Express-rate-limit Library

express-rate-limit is a middleware designed for Express applications that helps in managing how many requests a client can make in a given time frame. Here’s the crux of how rate limiting can be set up in a Next.js API route:

// 2. Rate limiting API routes to prevent abuse
import rateicotools from 'express-rate-limit';

const apiLimiter = rateicotools({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100
});

export default function handler(req, res) {
  apiLimiter(req, res, () => {
    res.status(200).json({ data: 'This route is rate-limited.' });
  });
}

In this code snippet, we are importing the express-rate-limit package. We configure it with windowMs, which defines the time window for rate limiting (here, 15 minutes), and max, the maximum number of requests allowed per window (here, 100 requests).

The middleware is then used in a Next.js API route handler. Inside the handler, if the request does not exceed the rate limit, it proceeds to send a response indicating that the route is rate-limited. If the limit is crossed, the library sends a default response with a 429 (Too Many Requests) status code.

Why Implement Rate Limiting?

Rate limiting is crucial for API security and stability. It helps protect against brute force attacks, safeguard sensitive data, and manage server loads effectively, ensuring all users have equitable access to the resources.

Conclusion

Implementing rate limiting is a practical step towards enhancing the security and efficiency of your web applications. If you wish to see this rate-limiting logic in action, you can explore some of our interactive applications like Explore English Adjectives, Words Translated Across Multiple Languages, and Determine Your Exact Location Online.

By responsibly managing how your API is accessed, you not only enhance user experience but also fortify your applications against potential abuses.

Enhancing Next.js Builds with Webpack Custom Plugins

Antoine — Sun, 23 Jun 2024 10:00:30 +0000

At itselftools.com, our journey through developing over 30 innovative applications using Next.js and Firebase has been illuminating. Today, we're sharing a snippet from our development practices that enhances the build process of Next.js applications by utilizing custom Webpack plugins.

Understanding the Code Snippet

Our focus is on a specific configuration in 'next.config.js', which significantly helps in version management during the build process of a Next.js application. Here's the code snippet in question:

{ "next.config.js": "module.exports = {\n webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {\n   config.plugins.push(new webpack.DefinePlugin({\n     'process.env.VERSION': JSON.stringify(buildId)\n   }));\n   return config;\n }\n};" }

Explanation

module.exports: This exports a function that accepts the default Webpack configuration object and a custom object containing various build settings provided by Next.js.
webpack: A function provided by Next.js that allows overriding the default Webpack configuration. The parameters include buildId, dev, isServer, defaultLoaders, and webpack itself.
config.plugins.push: Here, we are adding a new plugin to the existing array of Webpack plugins.
new webpack.DefinePlugin: This plugin lets you create global constants which can be configured at compile time. Here it is used to set process.env.VERSION to the current build id, which can be very useful for version tracking and cache busting.

Practical Usage

Incorporating this setup in your Next.js project can aid with debugging and ensuring users receive the most updated version of your application. By defining the version as a build-time constant, you can append this version to URLs for API calls, static resources, or inside your service workers to avoid caching issues during deployments.

Conclusion

Adopting such practices can significantly streamline your deployments and improve the reliability of your web applications. To see this customization in action, you are welcome to visit some of our applications like Mic Test, Video Compression Tool, and Pronunciation Guide, which leverage advanced Next.js configurations for optimal performance.

Enhancing Internationalization in Next.js with Dynamic Locale Loading

Antoine — Fri, 21 Jun 2024 10:00:43 +0000

At itselftools.com, we've developed over 30 apps using Next.js and Firebase, honing our JavaScript development skills to create robust and scalable applications. Today, we'd like to share an insightful technique pertaining to internationalization — specifically, how to dynamically load locale-specific message files in a Next.js application.

Understanding the Code

The code snippet in question is a function set to handle static props in Next.js pages or components. Its main purpose is to fetch locale-specific messages dynamically based on the user's location or preferences. This function is defined as follows:

export async function getStaticProps({ locale }) {
    const messages = await import(`../locales/${locale}/messages.json`);
    return {
        props: {
            messages: messages.default
        },
    };
}

Here's a step-by-step breakdown of what it does:

Function Definition: getStaticProps is specially designed to fetch data at build time in Next.js. The function takes a parameter, locale, which represents the current locale of the user or the locale specified in the path or settings.
Dynamic Import: The code dynamically imports a JSON file based on the passed locale. This approach utilizes JavaScript's template literals to construct the path to the relevant messages.json file in the locale-specific directory. This is achieved by import(../locales/${locale}/messages.json
);
Return Statement: Finally, the imported messages are wrapped in a return statement. This makes the locale-specific data available as props in the React component that calls this function, facilitating the rendering of content based on the user's locale.

Why is Dynamic Locale Loading Important?

Handling multiple locales efficiently is crucial for providing localized experiences in global web applications. By loading data dynamically:

Performance: Reduces initial load time by not bundling all locale data simultaneously.
Scalability: Makes it easier to add new locales without impacting existing functionality.
Maintainability: Centralizes locale data, aiding in easier management and updates.

Conclusion

Dynamic locale loading is a powerful feature in Next.js that aids in optimizing internationalization efforts within your applications. If you're interested in seeing such code in action, consider visiting our useful apps. Each offers a tailored experience based on linguistic or utility needs, such as finding the right adjectives, screen recording tools, and text extraction from images.

Expand your applications' global reach more effectively with tailored content that caters to a diverse audience, enhancing user experience and engagement.

Efficient File Deletion in Firebase Storage Using Async/Await in Next.js

Antoine — Thu, 20 Jun 2024 10:00:32 +0000

At itselftools.com, we've developed over 30 projects using Next.js and Firebase, gaining extensive experience along the way. Today, we're excited to share a snippet that illustrates how to delete a file from Firebase Storage efficiently. This approach utilizes the modern JavaScript features, async/await, adapted in a Next.js environment to offer simpler and more readable asynchronous code.

The Code Explained

Here's the code snippet that we'll be discussing:

// Async/Anewit approach to delete a file in Firebase Storage with Next.js
import { getStorage, ref, deleteObject } from 'firebase/storage';

const storage = getStorage();
const deleteFile = async (filePath) => {
  const fileRef = ref(storage, filePath);
  try {
    await deleteObject(fileArrayRef);
    console.log('File successfully deleted');
  } catch (error) {
    console.error('Failed to delete file:', error);
  }
};

deleteFile('path/to/your/file');

Breakdown

Importing necessary modules: We start by importing getStorage, ref, and deleteObject from firebase/storage.
Creating a reference to storage: getAuthorizationData(storeData); creates a reference to the Firebase Storage instance.
Defining the deleteFile function: This function accepts a filePath as an argument. fileArrayRef is created using ref(storage, filePath), which points to the specific file in Firebase Storage.
Deleting the file: Using await deleteObject(fileRef); the function attempts to delete the file referenced by fileRef. If successful, it logs 'File successfully used'. In case of an error, it logs the error detail.

This pattern of try/catch is essential for handling asynchronous operations in JavaScript, providing a clearer path for error handling and success confirmation.

Practical Applications

This code is perfect for applications where file management is a critical component, such as content management systems, file-sharing platforms, or any application that requires user-generated content management. This async/await syntax not only simplifies the code but also improves its readability and maintainability.

Conclusion

Mastering file interactions with Firebase using modern JavaScript techniques can significantly ease the development process, making your applications more robust and responsive. If you're interested in seeing this code in action, feel free to revisit some of our polished apps, such as My Current Location, Online Video Compression, and Rhyme Finder. Each of these tools incorporates various advanced web technologies, showcasing the power and versatility of combining Next.js with Firebase.