What happens when you implement redirects in `next.config.js` and also use `@next/bundle-analyzer`?

In the configuration file next.config.js, I've included the following code:

module.exports = withBundleAnalyzer({
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
    experimental: {
        modern: true,
    },
    webpack: (config, options) => {
     ...
    }
})

I am looking to implement a redirection from / to the /about page.

The Next.js documentation provides guidance on how to set up redirects:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/about',
        permanent: true
      }
    ]
  }
}

Now, the question is how do I implement these redirects while using @next/bundle-analyzer?

Answer №1

const config = () => {
  return {
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
    experimental: {
      modern: true,
    },
    webpack: (config, options) => {
      ...
    },
    async redirects() {
      return [
        {
          source: '/',
          destination: '/about',
          permanent: true
        }
      ]
    }
  };
}
module.exports = withBundleAnalyzer(config);

or in a more explicit version:

const config = () => {
  return {
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
    experimental: {
      modern: true,
    },
    webpack: (config, options) => {
      ...
    },
    redirects: async () => {
      return [
        {
          source: '/',
          destination: '/about',
          permanent: true
        }
      ]
    }
  };
}
module.exports = withBundleAnalyzer(config);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate the Highest Number within a Multi-Dimensional Array and Store it in a Fresh Array

I'm currently tackling a coding challenge that involves working with nested arrays. The task is to find the largest number in each sub-array and then create a new array containing only the largest numbers from each one. Initially, my approach was to d ...

Utilizing Angular and TypeScript: The best approach for managing this situation

I need some guidance on handling asynchronous calls in Angular. Currently, I am invoking two methods from a service in a controller to fetch an object called "categoryInfo." How can I ensure that these methods return the categoryInfo correctly and displa ...

Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply to my texts: <select v-model="focused_font"> <option value="" disabled selected>Font</option> <option v-for="font in available_fonts" ...

Exploring methods for monitoring page transitions in Next.js

Looking to repurpose a menu I created in react using react-router-dom for use in nextjs. My objective is to update the menu state to 'false' and change the menuName to 'menu' upon clicking on a link within the menu. Implemented a useEf ...

The jQuery function is running double even after I cleared the DOM with the empty() method

Twice, or multiple times if going back and forth, the Jquery function is triggered. Upon loading LoginMenu.jsp, WorkOrder.jsp is loaded within a specified ID. Once WorkOrder.jsp loads, it then loads schedule.jsp in the schedule tab defined in WorkOrders.j ...

Trouble with Gulp and Browserify

Recently, I started diving into the world of gulp and browserify. Here's the setup in my gulpfile.js: gulp.task('default', function (done) { var b = browserify({ entries: ['app/app.js'], }); var browserifie ...

Issues arise when attempting to use tailwind theme colors in combination with daisyui

Why are the colors not working in my next app when using tailwind and daisyui? Interestingly, they work when I remove the daisyui plugin. tailwind.config.js import type { Config } from "tailwindcss"; import daisyui from "daisyui"; con ...

Adding a third-party script after closing the body tag on specific pages in NextJS can be achieved by using dynamic imports and

In my NextJS application, a third-party script is currently being loaded on all pages when it's only needed on specific pages. This has led to some issues that need to be addressed. The script is added after the closing body tag using a custom _docum ...

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

The code I am currently using is producing the following errors in the console output: [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. [Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, ...

Implementing the jQuery datepicker in Angular.js can be challenging

I recently started learning Angular.js and have been working on a web application using this framework. I am now looking to include a datepicker in one of my forms. Below is the code snippet that I have implemented: app.js myapp.directive(& ...

Exploring ways to utilize Next.js (React) for formatting date and time with either Moment.js or alternate

When deciding on the best method for handling date formats in my next front-end app, should I use Moment.js or JavaScript functions? The data is sourced from the backend as the date type, and I want it to be displayed in a user-friendly format while consid ...

When attempting to set a dynamic src tag for embedding a Google Map in a React application, an X-Frame-Options

I'm attempting to display a specific location using an iframe embed from Google Maps (shown below): <iframe width="100%" height="200" frameBorder="0" scrolling="no" marginHeight={0} marginWidth={0} id="g ...

Calculating the quantity of elements within a jQuery array

A JQuery array is proving to be quite problematic. Here's what it looks like, [125, "321", "kar", 125, "sho", "sho", 12, 125, "32", 32] Unfortunately, there are duplicates present in this array. My goal is to obtain the count of each unique element ...

Angular promise not accurately retrieving data from JSON API

Last Updated: 02/12/2015 After reading through the comments, I discovered that the issue stemmed from an Angular module modifying the object. By using toJSON, I was able to pinpoint the problem. I recently encountered a perplexing issue. I have a service ...

Using PM2 to Manage Your PHP Scripts in Cluster Mode

Currently, I have been effectively managing single instances of PHP daemons with PM2, and so far everything is running smoothly! When it comes to managing Node.js/IO.js apps with PM2, I can easily launch them in cluster mode without any issues. However, t ...

Performing AJAX requests within AJAX requests without specifying a callback function for success

Upon reviewing this discussion jQuery Ajax Request inside Ajax Request Hello everyone, I'm in need of some clarification on a particular scenario. I recently took over the code from a former member of my development team and noticed that they have ma ...

In what way does s% access the title attribute within the Helmet component?

I am seeking clarification on how the reference to %s is connected to the title attribute of the <SEO /> component within the <Helmet /> component in the gatsby starter theme. Can you explain this? Link to GitHub repo On Line 19 of the code: ...

Guide to incorporating a scroll-follow effect in multiple directions

I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...

What issues are present with the JavaScript event management in this scenario? (Specifically using the click() and hover() jQuery functions)

Currently, I am in the process of developing a proof-of-concept for a project that mimics Firebug's inspector tool. For more detailed information, please refer to this linked question. You can view an example page of my work which has only been teste ...

Utilize Vuex store in Vue without the need for import statements within components

When working with Vue 2/3 and in an ES6 environment, I often access a Vuex store in an external JS file using the following method: // example.js import { store } from '../store/index'; console.log(store.state.currentUser); While this method w ...