2022-02-07
3733
#apollo#nextjs
Coner Murphy
91409
Feb 7, 2022 â‹… 13 min read

Why use Next.js with Apollo

Coner Murphy Web developer, content creator, and tech entrepreneur building phytype.com. I post about web dev, tech entrepreneurship, and financial freedom on my Twitter and blog.

Recent posts:

A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 â‹… 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 2025 â‹… 8 min read
Getting Started With Claude 4 API: A Developer's Walkthrough

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic’s Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Andrew Baisden
Jul 3, 2025 â‹… 16 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 â‹… 3 min read
View all posts

2 Replies to "Why use Next.js with Apollo"

  1. Thanks for this great tutorial (and the many other great LogRocket tutorials – I keep finding myself coming here when googling for solutions so your SEO + content strategy are working great too 🙂 )

    I am using Nextjs (SSG) + Strapi + Apollo/client for a website and everything is working perfectly. However I am trying to reduce client JS bundle size on Nextjs and apollo/client is the big biggest chunk that I am struggling to reduce/remove/split.

    All my pages are SSG and therefore since apollo/client is only used within getStaticProps, I believed that apollo/client should not be bundled for the client side.

    By a long process of elimination, I can see that even when I remove all references to apollo/client within /pages folder (by commenting out all the getStaticProps functions, it is still bundled and just simply having the following code within `lib/server-api.js` ensures it is bundled for the client-side:

    “`
    import {
    ApolloClient,
    InMemoryCache,
    gql,
    HttpLink,
    concat,
    ApolloLink,
    } from ‘@apollo/client’;

    const httpLink = new HttpLink({
    uri: `${
    process.env.NODE_ENV === ‘development’
    ? ‘http://localhost:1337’
    : process.env.NEXT_PUBLIC_STRAPI_API_URL
    }/graphql`,
    });

    const authMiddleware = new ApolloLink((operation, forward) => {
    operation.setContext(({ headers = {} }) => ({
    headers: {
    …headers,
    authorization: `Bearer ${
    process.env.NODE_ENV === ‘development’
    ? process.env.API_TOKEN_LOCAL
    : process.env.API_TOKEN
    }`,
    },
    }));

    return forward(operation);
    });
    const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: concat(authMiddleware, httpLink),
    });
    “`
    When I comment out the above, it is no longer bundled. But as you can see from above, this code is located in `lib/server-api.js` and nothing is exported.

    So why is it bundling to the client-side?

    Any help greatly appreciated!!

Leave a Reply