Need help building application with SSR.

jmak · 2023-09-11T21:03:22.600Z

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?

J

jmakOP•9/11/23, 10:00 PM

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

J

James•9/12/23, 5:43 AM

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

J

jmakOP•9/12/23, 5:22 PM

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

J

James•9/12/23, 5:23 PM

Did you opt the route into the edge runtime?

J

jmakOP•9/12/23, 6:31 PM

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';

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';

J

jmakOP•9/12/23, 6:32 PM

I am getting a 500 error though...

J

James•9/12/23, 6:33 PM

try using this syntax in pages dir apps

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

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

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

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

J

James•9/12/23, 6:34 PM

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

Need help building application with SSR.

Similar Threads

Similar Threads

Similar Threads