npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nexios-http

v1.1.21

Published

A fetch wrapper for Next.js with Axios-like features

Downloads

236

Readme

🌟 Nexios: The Ultimate Fetch Library for Next.js 🌟

Welcome to Nexios, a cutting-edge fetch library crafted for seamless integration with Next.js applications. With Nexios, you can enhance your data-fetching capabilities using advanced features like customizable interceptors and default configurations. This library is the perfect companion for modern web development, enabling you to build robust, efficient applications with ease.

🚀 Features

  • 🔧 Customizable Interceptors: Effortlessly modify requests and responses to meet your needs.
  • ⚙️ Configurable Defaults: Set global and instance-specific defaults for consistent behavior.
  • 🔐 Secure Token Management: Automatically include authentication tokens for secure API access.
  • 🔄 Response Transformation: Adjust and manipulate response data as required.
  • 🌍 Tailored for Next.js: Integrate smoothly with Next.js environments to maximize performance.

📦 Installation

Add Nexios to your Next.js project using npm or yarn:

npm install nexios-http
# or
yarn add nexios-http

🛠️ Getting Started

1. Create a Nexios Configuration File

Create a configuration file to set up your Nexios instance with default settings and interceptors. This file will manage global configurations and interceptors for all requests.

nexios.config.ts

import { Nexios } from "nexios-http";
import { NexiosOptions } from "nexios-http/types/interfaces";
import { cookies } from "next/headers";

// Default configuration for Nexios
const defaultConfig: NexiosOptions = {
  baseURL: "https://jsonplaceholder.typicode.com",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  credentials: "include",
  timeout: 10000,
};

const nexiosInstance = new Nexios(defaultConfig);

// Add request interceptor
nexiosInstance.interceptors.request.use((config) => {
  const accessToken = cookies().get("accessToken")?.value;

  if (accessToken) {
    config.headers = {
      ...config.headers,
      Authorization: `Bearer ${accessToken}`,
    };
  }

  return config;
});

// Add response interceptor
nexiosInstance.interceptors.response.use((response) => {
  // Transform response data if needed
  return response;
});

export default nexiosInstance;

2. Use Nexios in Your Next.js Pages

Now that you have a configured Nexios instance, you can use it in your Next.js pages to make HTTP requests.

page.tsx

import nexiosInstance from "@/config/nexios.config";

export default async function Home() {
  // Perform a GET request using the configured Nexios instance
  const response = await nexiosInstance.get("/todos/1", {
    cache: "no-store",
  });

  console.log(response.data);

  return <div>Hello</div>;
}

3. Handle Errors Gracefully

Catch and handle errors effectively to enhance user experience.

Example Error Handling

import nexiosInstance from "@/config/nexios.config";

export default async function Home() {
  try {
    const response = await nexiosInstance.get("/todos/1", {
      cache: "no-store",
    });
    console.log(response.data);
  } catch (error) {
    console.error("Error fetching data:", error.message);
  }

  return <div>Hello</div>;
}

📚 API Documentation

Nexios Class

  • Constructor: constructor(config: NexiosOptions = {})
    • config: Optional configuration object to initialize the instance.

Static Methods

  • setGlobalDefaults(defaults: NexiosOptions): Set global configuration defaults for all Nexios instances.
  • getGlobalDefaults(): NexiosOptions: Retrieve global configuration defaults.

Instance Methods

  • setDefaults(defaults: NexiosOptions): Set instance-specific defaults.
  • addRequestInterceptor(interceptor: RequestInterceptor): Add a request interceptor.
  • addResponseInterceptor(interceptor: ResponseInterceptor): Add a response interceptor.
  • get(url: string, options?: NexiosOptions): Perform a GET request.
  • post(url: string, body: any, options?: NexiosOptions): Perform a POST request.
  • put(url: string, body: any, options?: NexiosOptions): Perform a PUT request.
  • delete(url: string, options?: NexiosOptions): Perform a DELETE request.
  • patch(url: string, body: any, options?: NexiosOptions): Perform a PATCH request.
  • head(url: string, options?: NexiosOptions): Perform a HEAD request.
  • options(url: string, options?: NexiosOptions): Perform an OPTIONS request.

💡 Advanced Usage

Customizing Headers

Modify headers for specific requests:

nexiosInstance.get("/endpoint", { headers: { "X-Custom-Header": "value" } });

Timeout Handling

Set request-specific timeouts:

nexiosInstance.get("/endpoint", { timeout: 5000 });

Handling Caching

Manage caching with the cache option:

nexiosInstance.get("/endpoint", { cache: "no-store" });

📜 License

Nexios is licensed under the MIT License.

🙋‍♂️ Support

For support, please open an issue on the GitHub repository.


Thank you for choosing Nexios! We hope it simplifies your data-fetching needs and enhances your Next.js development experience. Happy coding! 🚀✨