Redirect to 404 when correct custom [slug] is not found in Next JS

[MarvinTchio]

I integrated Contentful with GraphQL, and verified all the queries were accurate. I have set up a dynamic rout [slug].tsx called PostPage under /blog/[slug].tsx alongside the BlogClient.tsx and corresponding Page.tsx which renders the page. The [slug].tsx is meant to take me to the page of any selected blog post from my blog page so the individual blog can be read better. However when I click the link from a blog post, although I'm taken to the correct app/blog/slug but receive a 404. I've logged and tested the slug to make sure it matches what's on Contentful and it shows accurately. The following code demonstrates is the set up I have between NextJs, Contentful, GraphQL and the ApolloClient . I have currently tried everything I can possibly think of that could be causing this issue and my conclusion is that everything looks good but the 404 page persists. Even more frustrating, I don't know who to ask to get past this dilemma. Hoping to get some guidance. Thanks!

import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import React from 'react';
import { gql } from '@apollo/client';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { getClient } from '../libs/apolloServer'; // Adjust the import path as necessary
import { BlogPost as Post } from '../libs/blogTypes';
import { FacebookShareButton, TwitterShareButton } from 'next-share';
import { FaFacebookF, FaTwitter } from "react-icons/fa";

// Type for the object that includes the slug
interface PostSlug {
  slug: string;
}

// GraphQL queries to fetch the slugs for all posts and the details of a post by its slug
const GET_ALL_POSTS_SLUGS = gql`
  query GetAllPostsSlugs {
    pageBlogPostCollection {
      items {
        slug
      }
    }
  }
`;

const GET_POST_BY_SLUG = gql`
  query GetPostBySlug($slug: String!) {
    pageBlogPostCollection(where: { slug: $slug }, limit: 1) {
      items {
        sys {
          id
        }
        title
        slug
        shortDescription
        featuredImage {
          url
          title
        }
        content {
          json
        }
      }
    }
  }
`;

export const getStaticPaths: GetStaticPaths = async () => {
  const apolloClient = getClient();
  const { data } = await apolloClient.query({ query: GET_ALL_POSTS_SLUGS });
  const paths = data.pageBlogPostCollection.items.map(({ slug }: PostSlug) => ({
    params: { slug },
  }));
  // console.log('Paths returned by getStaticPaths:', paths);
  return { paths, fallback: 'blocking' };
};

export const getStaticProps: GetStaticProps<{ post?: Post }> = async ({ params }) => {
  // console.log('getStaticProps params', params); 
  if (!params?.slug || typeof params.slug !== 'string') {
    return { notFound: true };
  }
  const apolloClient = getClient();
  const { data } = await apolloClient.query({
    query: GET_POST_BY_SLUG,
    variables: { slug: params.slug },
  });

  const post = data.pageBlogPostCollection.items.length > 0 ? data.pageBlogPostCollection.items[0] : null;

  if (!post) {
    return { notFound: true };
  }
  // console.log('Data fetched by getStaticProps:', post);
  return { props: { post }, revalidate: 1 };
};

const PostPage: React.FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ post }) => {
  if (!post) {
    return <div>Post not found.</div>;
  }

  const postUrl = `https://codnx.com/blog/${post.slug}`;

  return (
    <article>
      <h1>{post.title}</h1>
      {post.shortDescription && <p>{post.shortDescription}</p>}
      {post.featuredImage && (
        <img
          src={post.featuredImage.url}
          alt={post.featuredImage.title || 'Featured image'}
          style={{ width: '100%' }}
        />
      )}
      <div>{documentToReactComponents(post.content.json)}</div>
      <div className="social-share-buttons">
        <FacebookShareButton url={postUrl}>
          <FaFacebookF size={32} />
        </FacebookShareButton>
        <TwitterShareButton url={postUrl}>
          <FaTwitter size={32} />
        </TwitterShareButton>
      </div>
    </article>
  );
};

export default PostPage;

'use client';

import React from 'react';
import { useQuery } from '@apollo/client';
import Link from 'next/link';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { GET_ALL_POSTS_QUERY } from '../libs/contentful';
import { BlogPost as PostType } from '../libs/blogTypes';

const BlogClient = () => {
  const { data, loading, error } = useQuery<{ pageBlogPostCollection: { items: PostType[] } }>(GET_ALL_POSTS_QUERY);

  if (loading) return <div className="blog-loading">Loading...</div>;
  if (error) return <div className="blog-error">Error: {error.message}</div>;

  return (
    <div className="blog-container">
      {data?.pageBlogPostCollection.items.map((post) => (
        <BlogPostCard key={post.sys.id} post={post} />
      ))}
    </div>
  );
};

interface BlogPostCardProps {
  post: PostType; // Use the imported Post type here
}

const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
  // This function takes the description and truncates it to 160 characters
  const getShortDescription = (description: string) => {
    return description.length > 160 ? `${description.substring(0, 160)}...` : description;
  };

  return (
    <article className="blog-post">
      {post.featuredImage && (
        <img
          className="post-image"
          src={post.featuredImage.url}
          alt={post.featuredImage.title || 'Featured image'}
        />
      )}
      <div className="post-content">
        <h2 className="post-title">
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </h2>
        {post.shortDescription && (
          <p className="post-subtitle">
            {getShortDescription(post.shortDescription)}
          </p>
        )}
        <Link href={`/blog/${post.slug}`} className="read-more-link">Read More</Link>
      </div>
    </article>
  );
};

export default BlogClient;





// pages/blog.tsx
import React from 'react';
import BlogClient from './BlogClient'; 
import ClientOnly from '@/app/components/ClientOnly'; 

const BlogPage = () => {
  return (
    <ClientOnly>
      <BlogClient />
    </ClientOnly>
  );
};

export default BlogPage;

import { HttpLink, InMemoryCache } from '@apollo/client';
import { ApolloLink } from '@apollo/client';
import { NextSSRApolloClient, SSRMultipartLink } from '@apollo/experimental-nextjs-app-support/ssr';
import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";

// Load development-specific error messages
if (process.env.NODE_ENV !== "production") {
  loadDevMessages();
  loadErrorMessages();
}

// Configuration for connecting to your GraphQL endpoint
const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID;
const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN;
const endpoint = `https://graphql.contentful.com/content/v1/spaces/${space}/environments/master`;

// HTTP Link setup for fetching GraphQL data
const httpLink = new HttpLink({
  uri: endpoint,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});

// Function to create an Apollo Client instance
export function makeClient() {
  // Adjust to use NextSSRApolloClient for SSR with appropriate caching and link setup
  return new NextSSRApolloClient({
    link: typeof window === "undefined"
      ? ApolloLink.from([new SSRMultipartLink({ stripDefer: true }), httpLink])
      : httpLink,
    cache: new InMemoryCache(),
  });
}

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'; // Import ApolloClient here
import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc';

// Configuration for connecting to your GraphQL endpoint
const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID;
const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN;
const endpoint = `https://graphql.contentful.com/content/v1/spaces/${space}/environments/master`;

// HTTP Link setup for fetching GraphQL data
const httpLink = new HttpLink({
  uri: endpoint,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});

// Server Components Apollo Client setup
export const { getClient } = registerApolloClient(() => new ApolloClient({ // ApolloClient is now correctly imported
  cache: new InMemoryCache(),
  link: httpLink,
}));

import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client';
import { BlogPost as Post } from './blogTypes'; 

const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID;
const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN;
const client = new ApolloClient({
  link: new HttpLink({
    uri: `https://graphql.contentful.com/content/v1/spaces/${space}`,
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }),
  cache: new InMemoryCache(),
});

// GraphQL queries
export const GET_ALL_POSTS_QUERY = gql`
  query GetAllPosts {
    pageBlogPostCollection {
      items {
        sys {
          id
        }
        title
        slug
        shortDescription
        featuredImage {
          url
          title
          description
        }
        content {
          json
        }
      }
    }
  }
`;

export const GET_POST_BY_SLUG_QUERY = gql`
  query GetPostBySlug($slug: String!) {
    pageBlogPostCollection(where: { slug: $slug }, limit: 1) {
      items {
        sys {
          id
        }
        title
        slug
        shortDescription
        featuredImage {
          url
          title
          description
        }
        content {
          json
        }
      }
    }
  }
`;

// Fetch all blog posts
export async function fetchEntries(): Promise<Post[]> {
  const { data } = await client.query<{ pageBlogPostCollection: { items: Post[] } }>({ query: GET_ALL_POSTS_QUERY });
  return data.pageBlogPostCollection.items;
}

// Fetch a single post by slug
export async function fetchSingleEntry(slug: string): Promise<Post | null> {
  const { data } = await client.query<{ pageBlogPostCollection: { items: Post[] } }>({
    query: GET_POST_BY_SLUG_QUERY,
    variables: { slug },
  });
  return data.pageBlogPostCollection.items.length ? data.pageBlogPostCollection.items[0] : null;
}

import { gql } from '@apollo/client';
import { getClient } from './apolloServer'; // Expects a server-side Apollo Client setup
import { makeClient } from './apolloClient'; // Expects a client-side Apollo Client setup

// Interfaces for typing the responses from Contentful's GraphQL API
interface Sys {
  id: string;
}

interface BlogPost {
  sys: Sys;
  title: string;
  slug: string;
  content: string; // Adjust according to your actual content model
}

interface EntryCollectionResponse {
  entryCollection: {
    items: BlogPost[];
  };
}

interface SingleEntryResponse {
  pageBlogPost: BlogPost;
}

const GET_ENTRIES_QUERY = gql`
query GetEntries {
  pageBlogPostCollection {
    items {
      sys {
        id
      }
      title
      slug
      content {
        json
      }
    }
  }
}
`;

const GET_SINGLE_ENTRY_QUERY = gql`
  query GetSingleEntry($entryId: String!) {
    pageBlogPost(id: $entryId) {
      sys {
        id
      }
      title
      slug
      content {
        json 
      }
    }
  }
`;

function getApolloClient() {
  // If window is undefined, we are on the server, otherwise we are on the client.
  return typeof window === 'undefined' ? getClient() : makeClient();
}

// Fetch multiple entries by content type
export async function fetchEntries(contentType: string): Promise<BlogPost[]> {
  const client = getApolloClient(); // Use the refactored function here.
  const { data } = await client.query<EntryCollectionResponse>({
    query: GET_ENTRIES_QUERY,
    variables: { contentType },
  });

  return data.entryCollection.items;
}

// Fetch a single entry by entry ID
export async function fetchSingleEntry(entryId: string): Promise<BlogPost | null> {
  const client = getApolloClient(); // And here.
  const { data } = await client.query<SingleEntryResponse>({
    query: GET_SINGLE_ENTRY_QUERY,
    variables: { entryId },
  });

  return data.pageBlogPost;
}

[markoleavy]

You shouldn't use getStaticProps and getStaticPaths in app folder, nor name the file [slug].tsx. Those are methods and formats for the page router.
The migration guide is pretty exhaustive about that.

[MarvinTchio]

This makes so much sense, swear I was going to try a similar approach (add a folder inside the blog directory and render the [slug]tsx with its own page) and just gave up thinking it won't work. Will try it and let you know. Talk about never giving up...

[MarvinTchio]

Wow I'm so happy @markoleavy I literally spent 2 days one this issue and it was such a small fix. Thanks so much for your help!!!!!!!

[MarvinTchio]

What I had vs what I needed... Thanks again @markoleavy !

[markoleavy]

You're welcome! I had a look at your apollo implementation as well (I use apollo too), and I think you should review it.
You are mixing up the two client types, as you're probably confused with the difference between server components and server rendered client components.:

• Server component's instances are initiated with new ApolloClient wrapped with the registerApolloClient, and used calling an async function getClient().query in async server components.
• Client component's instances are initiated with 'new NextSSRApolloClient' - I know the name is misleading - called on client components using useQuery or other typed hooks). It's used both for server side rendering/static page generation (when typeof window === "undefined") and for client use.

function getApolloClient() {
  // If window is undefined, we are on the server, otherwise we are on the client.
  return typeof window === 'undefined' ? getClient() : makeClient();
}

This function is useless in server components (where typeof window is always undefined), and could cause errors if used in client component hooks or context

Again, follow the doc and you will get it right! ;-)

[MarvinTchio]

Thanks @markoleavy my current set up works but I will be back to this optimization soon as I get a chance. I think I faced a few issues with NextJs and versioning when installing npm install @apollo/client@rc @apollo/experimental-nextjs-app-support along the lines of:

I tried installing the lates version of the Apollo Client but the implementation was just not going smoothly and since I'm a bit pressed on time lately I decided to go with this approach. I definitely want to get this right though so I'll be back to fix this soon as next week. Thanks again for your help bro, you're amazing!