DEV Community

loading...
Cover image for Setting up proxy in Next.js for DEV environment

Setting up proxy in Next.js for DEV environment

george3447 profile image Georgekutty Antony ・2 min read

Introduction

In general, we expect to have a default proxy setup in Next.js just like react. But unfortunately, there is no such feature in package.json and we need to add custom proxy server and hacks to work with the external API in the development environment. Fortunately, in version 9.5, Next.js released a new simple way to interact with APIs that hosted outside the app.

Lets start by modifying our next.config.js file.

Step 1

We can use the new rule "rewrites". Refer to the documentation for the same. In order to proxy our API requests, we need to add this rewrites rule with source and destination. Please have a look at the below code.

 async rewrites() {
      [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
        ]
 }
Enter fullscreen mode Exit fullscreen mode

Here, the source will filter every calls that start with '/api' and the destination will be used to rewrite the request with 'http://localhost:3333/api'. The :slug* will take the remaining part and append the same to destination url.

Step 2

If we need to add another location that hosted separately, for example, every calls that starts with '/images', we can simply add the following code to our existing rewrites rule.

async rewrites() {
      [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
          {
            source: '/images/:slug*',
            destination: `http://localhost:3334/images/:slug*`,
          }
      ]
 }
Enter fullscreen mode Exit fullscreen mode

Here, the new rule source will filter every calls that start with '/images' and the destination will be used to rewrite the request with 'http://localhost:3334/images'. As I have mentioned earlier, the :slug* will take the remaining part and append the same to destination url.

Step 3

Furthermore, the rules we have added will work in production as well. If we have dedicated reverse proxy in production, then we don't require this rule. Whereas, we can disable it in production by adding a check for NODE_ENV.

async rewrites() {
      return !process.env.NODE_ENV === 'production'
      ? [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
          {
            source: '/images/:slug*',
            destination: `http://localhost:3333/images/:slug*`,
          },
        ]
      : [];
 }
Enter fullscreen mode Exit fullscreen mode
Please don't forget to run set NODE_ENV before running the npm run build command.

Step 4

Last step is to ensure that all our existing APIs in the client side has been changed to relative url. If we have API calls that needs to be run in server, then we need to change the external url to Next.js local development url just like in the following code.


export const getStaticProps/getServerSideProps = async () => {

  // Before Setting Proxy
  // const data = await getData('http://localhost:3333/api/data');

  // After Setting Proxy
  const data = await getData('http://localhost:3000/api/data');

  return {
    props: {
      data
    },
  };
};

Enter fullscreen mode Exit fullscreen mode

Here, Next.js will rewrite the http://localhost:3000/api to http://localhost:3333/api using the rewrites rule we have specified earlier in the next.config.js.

Conclusion

In this article, we saw that how we can set up proxy to external APIs without installing any third party packages or using custom server.js. I recommend you to have look at the Next.js documentation!

Discussion (3)

pic
Editor guide
Collapse
anishprvn profile image
Anish Praveen

Useful article. Proper code snippets are given.

Collapse
dalalrohit profile image
Rohit Dalal

Great article, thank you so much!

Collapse
frankbab profile image
Frank Baby

Nice article 👍