A much simpler way you could do uploads using 

, be on the bleeding edge. Uploadthing has become more popular for its simplicity and benefits, and so in this guide we will do a demo showcasing how we can upload and serve the images.

Before we begin, you should make sure you have the following:

Have github account. If you don't have one, visit 

A basic understanding of Next.js (app router)

Here are some of the key points you will come up with:

What uploadthing is, and the benefits of using it.

Usage of uploadthing storage with NextJs.

Step-by-step guide to uploading and retrieving images.

Uploadthing provides services for file uploads, and serves for full stack Typescript applications. This ensures type safety in your applications, which is one of the great benefits that comes together with uploadthing. It has features like server-side authorization.

: UploadThing manages file hosting, making it easier for you to handle files without the hassle.

: You retain control by hosting the endpoint on your own servers, avoiding bandwidth costs while ensuring security.

 Uploadthing provides convenient components and hooks for seamless frontend file uploads.

 and create a project, name it and press the create app button to complete it.

That would be it, the next thing is to head to the 

 section on the left to grab your secret keys, this would enable us to have access to the files we have on this project. We will have access to read and write, also delete files whenever we need it.

The next thing we need to do is set up Next.js project, going with type safety, we will do Typescript. In your commandline, paste the following command and answer a few questions on it.

We will go with yes in all the questions. This will scanfold a folder structure like this:

We then have to install the uploadthing and it's react client library. Make sure you’re in your project's directory, open your command line and run the following command.

 file in the root directory of your project folder. Add your UploadThing secret key in here.

This is like a blueprint for handling our file uploads in our application. It defines what types of files we can upload, the maximum file size, and any server-side logic that should run before or after the upload.

In the above code, we’re importing the necessary functions, and defining the functions.

f({ image: { maxFileSize: "4MB" } }): This configures the uploader to accept images with a maximum size of 4MB.

.middleware(async ({ req }) => { ... }): This function runs on the server before the upload. It uses the fake auth function to check if the user is authorized. If not, it throws an error. You can get your authorization function work here.

.onUploadComplete(async ({ metadata, file }) => { ... }):

 This function runs after the upload is complete. It logs the 

 to the console and returns some metadata.

And finally exporting the file, and we would be able to use it in our other pages.

This code sets up your API to handle file upload requests at 

Uploadthing has a tailwind configuration, all we need to do is to wrap our Tailwind configuration with 

 adds UploadThing-specific styles to your Tailwind configuration, ensuring your file upload components are styled correctly.

 create ready-to-use upload components that we can add to our 

That’s it with the configuration, we can now use the upload thing button in other components to upload files and serve them.

Let’s add the upload button now, create a component, 

 simplifies file uploads in our Next.js application. It connects to a specific endpoint (in this case, 

), and handles both successful uploads and errors with customizable callbacks.

When we upload a file, it runs client-side, providing immediate feedback through alerts and console logs for completion or errors if we need to.

When an image is successfully uploaded, the URL returned, we store it in the state 

 is then used to display a preview of the uploaded image with the Image component.

 directive at the top of your file, since the UploadButton component needs to run on the client-side.

Yeah plugins, you may not want to see the loading state of the button, but an instant button ready to take in file uploads faster. All we gotta do is import it in our 

Our final page would look like this, upload and serve, you could also catch the url and store it in your database and fetch it later.

When you head up to the dashboard, you’ll find the uploaded image right there, and that’s it.

There are a variety of button uploads we could use, you can try 

In this guide, we covered how to integrate UploadThing with a Next.js project to upload and serve images/files. We discussed the benefits of using UploadThing, such as simplified file hosting, server-side authorization, and a great client experience. We then walked through setting up a Next.js project, installing UploadThing, configuring environment variables, creating a FileRouter, and creating components to handle file uploads.

By following this guide, you should now have a Next.js application capable of uploading and serving images/files using UploadThing. Enjoy the simplicity and benefits of using UploadThing in your projects!

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Dive into our programming articles for insights and tips.

Articles

Next.js file uploads made easy with uploadthing - An alternate to s3 bucket

To build powerful applications, at some point you may need to store your data on cloud storage providers, including 

 and so many more. In this guide, we will look into one of the popular used storages, Supabase storage. We will build a simple profile form, to upload our profile picture. Every step you need to take to get started with Supabase storage.

What Supabase storage is, and the benefits of using it.

Step-by-step guide to uploading and retrieving images

Supabase is an open-source Firebase alternative that provides a variety of backend services, including a powerful storage solution. It is a part of the Supabase suite, which will allow you to store and serve any type of files, including images, videos, and documents.

It is a simple and scalable solution for handling file storage in web applications.

: Supabase has a simple API for file uploads and downloads.

: It also has access control and permission settings to keep your data safe.

: They are built with scalability in mind, to handle growing amounts of data efficiently.

We’ll walk through the process of integrating Supabase Storage with a Next.js application together with you. This will include 

implementing file upload and retrieval functionality

. We will do a simple image upload and retrieval, but you’ll learn a lot along the way.

You will have to create a Supabase project 

 and fill in the required details and wait until it launches.

First, we need to set up a new Next.js project, we will do a TypeScript project. Open the command line and runt the following code:

We will scaffold the project structure this way, using tailwind for styling, app directory etc. …

The next thing we have to do is We then install the Supabase client library.

file where we can store our keys we saved earlier, including 

 key. Paste the following replacing with your actual keys.

Supabase utilities: Connecting with Supabase client

Supabase has two different types of clients to access its services, including:

 This is used to access Supabase from Client Components, which run in the browser.

: This is used to access Supabase from Server Components, 

We will create the utility files, a recommended way, and set up these clients. We will organize them within the 

 directory at the root of our project. For our case we will go with the 

First, we need to create a storage bucket in Supabase. We will name our bucket 

 but you can name it whatever you want. You will have to choose to make it public if you like.

You can also play around, make various adjustments such as setting permissions, creating policies, and making the bucket public.

As shown in the image above, you can upload images manually by dragging and dropping them into the bucket. You can organize your storage by creating different folders. This makes it easy to categorize and manage your files.

To this point we’re all set up for development, we’ve already set everything we need to keep going, doing the most fundamental with Supabase storage. We will have to create an input field for file uploads and an image component, to display the uploaded image.

The above code is a simple template to start up, it contains an input file element, and an image component, which we will display the uploaded image.

We’ve kept the state to manage the state of the image URL, and when we fetch the image from the bucket, we will then use it to set the image url and display it in the image.

: defining policies are important, you should keep in mind to write the policies to allow who can perform some actions in your bucket, e.g. authenticated users can add, update, delete and so on. 

Head to the policies to define the policies. We will set it to 

 in our case to allow everyone to demo along. That will allow everyone to do some actions on the images.

 function, we handle the Supabase upload, uploading the image. We check if the file exists, once we have confirmed that a file is selected, we extract the first file from the file input. This file object contains all the necessary information about the selected image, such as its 

 is the name of the bucket where we store our 

 specifies the file name under which the image will be saved.

If an error occurs during the upload process, it is thrown and caught in the catch block, where it is logged to the console, and if everything goes well, the image will be uploaded successfully to the bucket.

When we upload, you can see the image uploaded successfully, and to view it you can click on the file and view it on the right. You can also define the folder to structure the files categories.

After upload we can retrieve the public URL of the uploaded image. Fortunately, supabase has a convenient `getPublicUrl` method to get the URL that we can use to access it publicly.

 on the same storage bucket, and we pass in the file name. After the image is successfully retrieved, we set in the 

 state, triggering a re-render of our component to display the uploaded image.

 function handles both the upload and retrieval of the image URL using Supabase.

: Ensure your Supabase bucket permissions are configured correctly based on your requirements, following the documentation for setting policies.

: Organize your project with the recommended folder structure to maintain a clean and manageable codebase.

: Implement validation to check file types and sizes before uploading to prevent unsupported or large files.

: Use Next.js’s Image component features like lazy loading and responsive images to optimize performance.

In this post, we learned how to use Supabase Storage to upload and display images in a Next.js application. Supabase provides an easy-to-use and secure way to handle file storage. Try integrating it into your own projects and see how it can simplify your file management needs.

Next.js and Supabase: How to Store and Serve Images

A multilingual website offers content in more than one language. It's designed to cater to audiences from different linguistic backgrounds, allowing users to select their preferred language, read, and interact with the website's content. 

By targeting user requirements through language-specific content, businesses can create a more inclusive and accessible online presence that satisfies user requirements and drives business growth forward.

Next.js's built-in i18n routing vs the next-intl library

 library supports the management of locales by providing support for translating content into multiple languages. Developers can define a list of supported languages and specify the default language for their application.

Despite their similarities, they also serve different purposes:

Next.js provides native support for internationalized routing.

With Next.js's i18n routing, you can set a default locale and domain-specific locales. Next handles the routing based on the user's preferred language.

The next-intl library provides additional features beyond the basic routing such as translation, message formatting, and date formatting.

Next-intl provides control over how messages are formatted and displayed in different languages allowing for flexibility.

It provides locale management including utilities for managing locales and dynamically switching between languages at runtime.

The choice between the two depends on the project's complexity and user requirements. In this article, we will use the next-intl library for our project.

next-intl integrates with the App Router by using a [locale] used to provide content in different languages. e.g./en, /en/about, etc.

Next, run the following command to install next-intl in your project.

The folder structure should look like this:

We will create a messages folder at the root of our project and create different locales. In our case, we require support for English, Spanish, and French languages. We will create three different JSON files to support these locales.

Here is an example of the en.json file which provides support for English locale.

Empower your transactions,

Unleash the possibilities

Hello world!

Something went wrong!

The next step is to configure a plugin that creates an alias. This alias will allow you to provide your internationalization (i18n) configuration to a Server Component in your project.

 creates a configuration once per request. You can provide messages and other options depending on the user's locale.

: This function is used to dynamically configure internationalization settings based on each incoming request.

: If a locale is not included in the locales array, notFound() is called to return a 404 error. This prevents users from accessing unsupported locales.

: The function then dynamically imports a JSON file based on the locale. This JSON file contains localized messages for the application, structured as 

: This allows the loading of localization messages needed based on the selected locale optimizing the performance of the application.

The middleware matches a locale for the request and, handles redirects and rewrites accordingly.

 function is called with a configuration object. This configuration includes:

: An array of strings representing the locales that your application supports. In this case, it supports English (

: This indicates the default locale to use if the incoming request does not match any of the supported locales or if the locale cannot be determined from the request.

The locale determined by the middleware is accessible through the 

 parameter. It enables the configuration of the document language based on the locale.

With this, you can incorporate translations within your page components.

The param indicates the current language for the user's session. For example, 

  for French. It's essential for determining which translation settings and locale-specific content to present to the user.

Use translations in your components or anywhere else in your app tree. We will use useTransalation in the HomePage component and the header component.

The t() method is accessed through the useTranslation hook from the next-intl hook. It fetches the translated strings based on the selected locale.

: These calls retrieve translated titles from the translation files for display on the homepage.

Here we also import a utility function - (highlightWords) for text manipulation.

To illustrate how using translation works, let's integrate translation capabilities into the Homepga component and the Header component.

We will create a separate language switcher component and import it here.

This component provides an interface for dynamically switching the locale of the application.

The useTransition hook provides a start transition function that handles updates that should be deferred until the next browser render.

The useRouteer hook changes the URL based on the selected language. For example, navigating to 

 displays the English version of the Homepage section.

The useLoacle retrieves the active locale which sets the default value of the select dropdown.

The handleSelect function captures the new language selected by the user and is triggered by the onChange event on the  <select> element.

Translating the plain text based on the selected locale.

The challenge involves adding multilingual functionality to the existing homepage of the Karapay website. Users should be able to switch between English, Spanish, and French versions seamlessly, with all textual content updated accordingly. Completing this challenge will empower the website to cater to a wider global audience and provide a more inclusive user experience.

Github Repo: https://github.com/kodaschool/Multilingual-website-kodaschool/

Building a Multilingual application in Nextjs 14

Multistep forms have become a common feature in modern web and mobile applications. When dealing with complex data inputs requiring user information, a multistep form can significantly enhance user engagement and improve data quality. 

They provide an intuitive user experience since a user can categorically fill in the form data in a particular viewport.

In this guide, we will look into how to build a multistep form in Nextjs using React hook form and Zod.

On installation, you will get the following prompts.  We will use Tailwind and Typescript.

After the prompts, create-next-app will create a folder with your preferred project name and install the required dependencies

: This is a flexible and lightweight library for managing forms in React applications. Its primary appeal lies in its performance and minimal re-renders. React Hook Form uses a hook-based approach, which aligns well with the functional components paradigm in React. It offers features like built-in validation, error handling, and integration with various UI libraries, making it a developer-friendly choice.

: This is a TypeScript-first schema validation library. Schema refers to any data type from a string to a complex object. Zod schemas can be used to enforce type safety, ensuring that the data conforms to specified formats and types.

We will use context API to manage our form data. The custom context will store the form data and a function to update it.

Remember to wrap the application with the form provider, this ensures every component in the tree has access to the data stored in the context store.

The stepper component is used to indicate the progress and number of steps that are required to complete and submit the form data.

We need to define some custom styles for the stepper component in the global.css file

The steps can have different colors to indicate their completion status or which one is currently active

We will create three forms which are sections of the Multiform component.

The forms include a personal details form, a Contact form, and a Payment form.  All the forms use the React hook form to handle the form submission and Zod for schema validation.

With zodResolve, we can integrate Zod schema validation into the React Hook Form workflow.

Defining the schema using Zod ensures validation rules and custom error messages for validation errors have been set.

Passing the Zod schema to the useForm hook using the resolve ensures React uses the specified Zod schema for validation.

React hook form populates the errors object with validation errors based on the Zod schema. The errors are displayed below the form Input.

 hook is instantiated to access the Next.js router for navigation.

 hook from React Hook Form is invoked to initialize the form with validation based on the schema.

Each input field is registered with React Hook Form using the 

 function, which enables data binding and form validation a.

The form submission is handled by the handleSubmit function which involves the onSubmit callback when the form is submitted.

 callback updates the form values, increments the current step of the form, and navigates to the next step.

This schema will define the structure and validation rules for the personal details form.

An example of the personal details form validation.

The addressSchema set of rules defines the estate as an optional value. 

The sample code for the Address form component.

Based on this example, the estate is not a required value during form submission.

The payment form takes in the payment schema which defines the validation rules.

The Review component is used to display a review of form details, including the form values obtained from the 

Below are the complete form details once all the required form data has been provided.

Articles

Next.js file uploads made easy with uploadthing - An alternate to s3 bucket

Next.js and Supabase: How to Store and Serve Images

Building a Multilingual application in Nextjs 14

Build a Multistep form in Next.js powered by React hook form and Zod

Practice Frontend, Android and iOS by building real world projects.