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:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 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