CD
Cloudflare Developers•16mo ago
jmak

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
jmak
jmakOP•16mo ago
My dynamic routes are not being reached when i try to access them directly. I get 404 errors
James
James•16mo ago
Are you able to share a link to a GitHub repo for your app?
jmak
jmakOP•16mo ago
Github repo is currently private, but I think it's supposed to be something with edge runtime and dynamic routing
James
James•16mo ago
Did you opt the route into the edge runtime?
jmak
jmakOP•16mo 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
James•16mo 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

Did you find this page helpful?