Cloudflare Developers•15mo ago

Need help building application with SSR.

It seems the build guide is outdated. I've gone ahead and added the compatability flag, but do other things need to be set? What is my next.config.json supposed to look like?

6 Replies

jmakOP•15mo ago

My dynamic routes are not being reached when i try to access them directly. I get 404 errors

James•15mo ago

Are you able to share a link to a GitHub repo for your app?

jmakOP•15mo ago

Github repo is currently private, but I think it's supposed to be something with edge runtime and dynamic routing

James•15mo ago

Did you opt the route into the edge runtime?

jmakOP•15mo ago

Yes, I have something like this:

const ImageCardPage = ({exploreImage}) => {
    const router = useRouter();
    const {id} = router.query;

    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

    const handleModalClose = () => {
        router.push('/');
    };

    console.log("NEXT API URL: ", process.env.NEXT_PUBLIC_API_URL)
    console.log("EXPLORE IMAGE: ", exploreImage)


    return (
        isMobile ? <MobileDetailedImageCard
                exploreImageId={id}
                exploreImage={exploreImage}
                closeModal={handleModalClose}
            /> :
            <DetailedImageCard
                exploreImageId={id}
                exploreImage={exploreImage}
                closeModal={handleModalClose}
            />
    );
}

export default ImageCardPage;

export async function getServerSideProps({params}) {
    const imageData = await exploreService.getExploreImage(params.id);
    return {
        props: {
            exploreImage: imageData
        }
    };
}

export const runtime = 'experimental-edge';

const ImageCardPage = ({exploreImage}) => {
    const router = useRouter();
    const {id} = router.query;

    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

    const handleModalClose = () => {
        router.push('/');
    };

    console.log("NEXT API URL: ", process.env.NEXT_PUBLIC_API_URL)
    console.log("EXPLORE IMAGE: ", exploreImage)


    return (
        isMobile ? <MobileDetailedImageCard
                exploreImageId={id}
                exploreImage={exploreImage}
                closeModal={handleModalClose}
            /> :
            <DetailedImageCard
                exploreImageId={id}
                exploreImage={exploreImage}
                closeModal={handleModalClose}
            />
    );
}

export default ImageCardPage;

export async function getServerSideProps({params}) {
    const imageData = await exploreService.getExploreImage(params.id);
    return {
        props: {
            exploreImage: imageData
        }
    };
}

export const runtime = 'experimental-edge';

I am getting a 500 error though...

James•15mo ago

try using this syntax in pages dir apps

export const config = { runtime: 'experimental-edge' };

export const config = { runtime: 'experimental-edge' };

It's possible that will resolve your issues, it's a bit iffy about which syntax to use in pages dir

Gaming

Programming

Need help building application with SSR.