Next Js Use Server for Custom and Scalable Solutions

You can use Next Js server for custom solutions, such as handling API routes, serving static files, and more. With Next Js, you can get started with server-side rendering in minutes.

Next Js server provides built-in support for handling API routes, which allows you to create custom API endpoints for your application.

This is particularly useful for applications that require a high degree of customization and scalability.

By using Next Js server for custom solutions, you can create a more efficient and scalable application that meets the needs of your users.

Expand your knowledge: How to Use Reducer Api in Next Js 14

To set up Next.js for server-side rendering, you'll need to understand the basics. Server-side rendering (SSR) is a technique where the web server generates the complete HTML content of a web page before sending it to the user's browser.

Next.js provides a seamless way to enable SSR and Static Site Generation (SSG). It pre-renders every page by default. Depending on the use case, you can choose between SSR and SSG.

Here's a quick rundown of the two rendering methods:

Next.js determines which rendering method to use based on the functions you implement in your page components (getStaticProps and getServerSideProps).

To set up a Next.js project, create a new one using `create-next-app`. This will get you started with a basic project structure.

Next, install `@sendgrid/mail` as a dependency. This will allow you to send emails using SendGrid.

Create a `.env.local` file in the root of your project and add your SendGrid API key as an environment variable. This is a crucial step to connect your project with SendGrid.

Make sure to add `.env.local` to your `.gitignore` file to avoid exposing your API key. This is a security best practice to keep your API key safe.

Worth a look: Using State in Next Js

To set up Next.js for server-side rendering, you'll need to use a package that safeguards your application. This package is called server-only.

First, install the server-only package. This will ensure that your server-side code doesn't leak to the client. You can install it as a dependency in your project.

Next, modify your server-utils.ts file to include this package. This will help prevent the build process from throwing an error if someone tries to import server-side code into a client component.

Here's an interesting read: Next Js Install

Server Actions in Next.js can be defined and run only on the server, which reduces client-side JavaScript and minimizes the initial page load time.

By eliminating the need to create and manage separate API endpoints, Server Actions simplify data management and improve performance by avoiding unnecessary network roundtrips.

Server Actions can be used to develop progressively enhanced forms that remain functional even when JavaScript is disabled, while offering an enhanced user experience when JavaScript is enabled.

Server Actions can be created in two places: inside the server component where it is being used, or in a separate file with the use server directive at the top.

Here are the ways to use Server Actions:

You can create Server Actions in two places.

Inside the server component where it is being used, you can add the use server directive to instruct Next.js to consider that async function as a Server Action.

In a separate file, e.g., actions.js, you can create multiple reusable Server Actions within a single file, making them usable for client and server components.

Additional reading: Next Js Call Api on the Server Example

To create a new Server Action, you'll need to add the use server directive at the top of the file.

Here are the two methods for creating Server Actions:

By using the use server directive, you can easily create Server Actions and make them usable for your Next.js project.

Related reading: 'use Server' Nextjs

You can use server actions in various ways, and one of the most straightforward methods is by using the action attribute on the form tag.

To do this, you simply add the action attribute to the form tag, and Next.js will handle the rest.

This approach is particularly useful when you want to keep your code organized and easy to maintain.

Server actions can also be used by wrapping the server action in the startTransition function of the useTransition hook in a client component.

This is a more advanced technique, but it allows you to create a seamless user experience by invoking the server action when the button is clicked.

Here are some ways to use server actions:

Server-side rendering (SSR) is a technique in web development where the web server generates the complete HTML content of a web page before sending it to the user's browser. This is unlike client-side rendering (CSR), where the browser downloads a basic HTML structure and then uses JavaScript to fetch and display the content.

Next.js provides a seamless way to enable SSR and Static Site Generation (SSG). It pre-renders every page by default. Depending on the use case, you can choose between SSR and SSG:

Next.js determines which rendering method to use based on the functions you implement in your page components (getStaticProps and getServerSideProps).

To create a page with Server-Side Rendering (SSR) in Next.js, you'll need to use the getServerSideProps function. This function is exported from the pages/index.js file and executes on the server for each request to this page.

The getServerSideProps function is where you can perform asynchronous operations, such as fetching data from an external API. You can return the fetched data as an object with a props key, which will be passed to the Home component as props.

For your interest: Getserversideprops Nextjs

Here's an example of how to use the getServerSideProps function:

You can add error handling to the getServerSideProps function to manage any issues that might arise during data fetching. For example:

By using the getServerSideProps function, you can create pages with SSR in Next.js and improve the performance and SEO of your application.

Server Actions differ from conventional API routes in several key ways. They are designed to handle server-side rendering, which allows for faster page loads and improved SEO.

One key difference is that Server Actions are not just a way to send data to the client, but also to render the initial HTML on the server. This is in contrast to API routes, which typically just return data in a format like JSON.

Server Actions can also be used to handle dynamic routing, which allows for more flexible and customizable routing. This is in contrast to traditional API routes, which often require a more rigid routing structure.

A different take: Next Js Use Context

In Next.js, Server Actions are used to handle server-side rendering, but they can also be used to handle API routes. However, they have some key differences, such as the ability to render HTML on the server.

Server Actions are also designed to work seamlessly with the Next.js framework, which makes it easier to implement server-side rendering and dynamic routing. This is a major advantage over traditional API routes, which often require more manual setup and configuration.

Worth a look: Nextjs Custom Server

getStaticProps is used for static generation, running at build time to fetch data and pass it to your page as props.

Use getStaticProps for data that doesn't change often, as it's a great way to optimize your site's performance.

getServerSideProps, on the other hand, runs on every request, allowing you to fetch data at request time and making it perfect for dynamic data.

Additional reading: Getstaticprops Next Js

getStaticProps is used for static generation, running at build time to fetch data and pass it to your page as props, ideal for data that doesn't change often.

Here's an interesting read: Next Js Fetch Data save in Context and Next Route

This approach allows you to pre-render your pages with the fetched data, resulting in faster page loads for your users.

getStaticProps runs at build time, which means you can take advantage of this feature even if your users don't visit your site immediately after deployment.

You can use getStaticProps to fetch data from APIs, databases, or other sources, making it a versatile tool for building data-driven applications.

To delete a contact, you'll need to create a Server Action in a separate file, like actions.ts, to interact with the database. This Server Action, deleteContactById, takes two parameters: the contact's ID and a flag indicating whether the deletion request comes from the homepage or the view page.

The deleteContactById function uses the Prisma Client's delete API to delete the specified contact from the database. It's essential to pass the contact's ID to the where clause to ensure the correct contact is deleted.

The DeleteButton component is created to invoke the Server Action on the button's onClick event handler. This component takes the contact's ID as a prop and uses the usePathname hook to get the current route.

To handle non-blocking UI updates, you can use the startTransition function of the useTransition hook to invoke the Server Action. This allows the UI to update without blocking the user's interaction.

Here's a summary of the parameters used in the deleteContactById function:

In Next.js, you can use the `use server` directive to create server actions, which allows you to run code on the server instead of the client.

To create a server action, you need to use the `use server` directive at the top of a file or a function, as seen in the example of sending an email from a server action function.

This approach is useful for tasks that require server-side processing, such as sending emails, where you can use libraries like SendGrid to create a raw FormData object and send the email using the SendGrid API.

You can import the necessary dependency package and use it to create a raw FormData object, which is then used to send the email.

To send email from an action function in Next.js, you need to use the `use server` directive at the top of the file or function. This tells Next.js that the code should run only on the server, not on the client.

You can start by importing the necessary dependency package, which in this case is SendGrid's mail library. The library will help you create a raw form data object that can be used to send the email.

The `use server` directive is essential to ensure that all the code within the function is executed on the server, making it possible to send emails using the SendGrid API. This function gets the form data from the actions and uses it to create an email that will be sent to the recipient.

To complete the function, you'll need to create an `rawFormData` object using the SendGrid mail library and then send the email using the SendGrid API. This will involve sending a success or error response accordingly, depending on the outcome of the email sending process.

Worth a look: Next Js Forms

Adding a new contact to your email and contact management system is a straightforward process. You can create a Server Action to add a new contact to the database.

To start, you'll need to add the Server Action to your ContactForm component. This involves passing the addContact Server Action to the action attribute of the form element.

When a user submits the form, the Server Action will create a new contact in the database using the Prisma Client's create API. The new contact will be created with the specified name, phone number, and city.

The Server Action code for this section can be found in the GitHub commit. To see the functionality in action, open the terminal and run the npm run dev command, then go to localhost:3000 and enter the contact details in the form.

The revalidatePath method from the next/cache module is used to ensure the / path is revalidated once the contact is saved in the database. This ensures that the UI reflects the most recent contact data.

By implementing a Server Action, you can create a new contact in a much simpler way compared to the API route approach, which would typically involve creating a form component, defining an API route, and making a POST request to the API endpoint.

To start the development server, navigate to the root of the project using the command prompt.

You can then start the development server by running a command in the terminal, which allows you to handle custom server-side logic.

This custom server is handling requests that begin with /api, and any other requests are handled by the Next.js server.

By using this custom server, you can handle API routes, errors, and set custom headers.

Discover more: Next Js Using State Context