yulioaj290/[...app_path].js

## [...app_path].js
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import Head from 'next/head'
import axios from 'axios'

export default function AppPath({ appPath, title, keywords, description }) {
    const [originUrl, setOriginUrl] = useState('')
    const router = useRouter()

    useEffect(() => {
        const { query } = router
        setOriginUrl(window.location.origin.replace('https', 'http'))
        router.push({ pathname: `/${query['app_path'].join('/')}`, query: { from_landing: true } })
    }, [])

    return (
        <Head>
            <title key="title">{title}</title>
            <meta key="keywords" name="keywords" content={`Lighter, Lighter.com, ${keywords}`} />
            <meta key="description" name="description" content={description} />
            <meta key="og-title" property="og:title" content={title} />
            <meta key="og-description" property="og:description" content={description} />
            <meta key="og-url" property="og:url" content={`https://lighter.com${appPath}`} />
            <meta key="twitter-title" name="twitter:title" content={title} />
            <meta key="twitter-description" name="twitter:description" content={description} />

            <link rel="icon" href="/favicon.png" />
            <meta charSet="utf-8" />
            <meta httpEquiv="X-UA-Compatible" content="IE=edge" />

            <meta
                name="viewport"
                content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
            />
            <meta name="author" content="Lighter Company" />
            <meta name="robots" content="index" />

            <meta property="og:locale" content="en_US" />
            <meta property="og:site_name" content="Lighter App" />
            <meta property="og:image" content={`${originUrl}/home-card.png`} />
            <meta property="og:image:url" content={`${originUrl}/home-card.png`} />
            <meta property="og:image:secure" content={`${originUrl}/home-card.png`} />
            <meta property="og:image:secure_url" content={`${originUrl}/home-card.png`} />
            <meta property="og:image:type" content="image/jpeg" />
            <meta property="og:image:width" content="1200" />
            <meta property="og:image:height" content="630" />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:site" content="@lighter_app" />
            <meta name="twitter:image" content={`${originUrl}/home-card.png`} />

            <link rel="canonical" href="https://lighter.com/" />
        </Head>
    )
}

export async function getServerSideProps(context) {
    const { url: urlPath } = context.req

    let previewData

    try {
        previewData = (
            await axios.post(`https://us-central1-lighter.cloudfunctions.net/getLinkPreviewData`, {
                data: { pathname: urlPath },
            })
        )?.data
    } catch (e) {
        console.log(e.message)
    }

    return {
        props: {
            appPath: urlPath,
            title: previewData?.title || 'Lighter App',
            keywords:
                'Lighter, Lighter App, App game for kids, Collaboration, Multiplayer, Torch Lighter, Entertainment',
            description:
                previewData?.description || 'Lorem ipsum dolor sit amet consectetur adipiscin elit bla bla bla...',
        }, // will be passed to the page component as props
    }
}

## next.conf.js
const destinationHost = 'https://lighter.com'

module.exports = {
    async rewrites() {
        return [
            // All routes from the LP
            {
                source: '/:path*',
                destination: '/:path*',
            },

            // Static files of the App
            {
                source: '/favicon.ico',
                destination: `${destinationHost}/favicon.ico`,
            },
            {
                source: '/static/:path*',
                destination: `${destinationHost}/static/:path*`,
            },
            {
                source: '/fonts/:path*',
                destination: `${destinationHost}/fonts/:path*`,
            },

            // Redirect to the App the routes already processed
            {
                source: '/:path*',
                has: [{ type: 'query', key: 'from_landing' }],
                destination: `${destinationHost}/:path*`,
            },

            // Specific App router with Link Preview
            {
                source: '/board/:path*',
                destination: `/_preview/board/:path*`,
            },
            {
                source: '/battles/:path*',
                destination: `/_preview/battles/:path*`,
            },
            {
                source: '/maps/:path*',
                destination: `/_preview/maps/:path*`,
            },
            {
                source: '/character',
                destination: `/_preview/character`,
            },

            //
            {
                source: '/:path*',
                destination: `${destinationHost}/:path*`,
            },
        ]
    },
}
	import { useRouter } from 'next/router'
	import { useEffect, useState } from 'react'
	import Head from 'next/head'
	import axios from 'axios'

	export default function AppPath({ appPath, title, keywords, description }) {
	const [originUrl, setOriginUrl] = useState('')
	const router = useRouter()

	useEffect(() => {
	const { query } = router
	setOriginUrl(window.location.origin.replace('https', 'http'))
	router.push({ pathname: `/${query['app_path'].join('/')}`, query: { from_landing: true } })
	}, [])

	return (
	<Head>
	<title key="title">{title}</title>
	<meta key="keywords" name="keywords" content={`Lighter, Lighter.com, ${keywords}`} />
	<meta key="description" name="description" content={description} />
	<meta key="og-title" property="og:title" content={title} />
	<meta key="og-description" property="og:description" content={description} />
	<meta key="og-url" property="og:url" content={`https://lighter.com${appPath}`} />
	<meta key="twitter-title" name="twitter:title" content={title} />
	<meta key="twitter-description" name="twitter:description" content={description} />

	<link rel="icon" href="/favicon.png" />
	<meta charSet="utf-8" />
	<meta httpEquiv="X-UA-Compatible" content="IE=edge" />

	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
	/>
	<meta name="author" content="Lighter Company" />
	<meta name="robots" content="index" />

	<meta property="og:locale" content="en_US" />
	<meta property="og:site_name" content="Lighter App" />
	<meta property="og:image" content={`${originUrl}/home-card.png`} />
	<meta property="og:image:url" content={`${originUrl}/home-card.png`} />
	<meta property="og:image:secure" content={`${originUrl}/home-card.png`} />
	<meta property="og:image:secure_url" content={`${originUrl}/home-card.png`} />
	<meta property="og:image:type" content="image/jpeg" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="630" />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@lighter_app" />
	<meta name="twitter:image" content={`${originUrl}/home-card.png`} />

	<link rel="canonical" href="https://lighter.com/" />
	</Head>
	)
	}

	export async function getServerSideProps(context) {
	const { url: urlPath } = context.req

	let previewData

	try {
	previewData = (
	await axios.post(`https://us-central1-lighter.cloudfunctions.net/getLinkPreviewData`, {
	data: { pathname: urlPath },
	})
	)?.data
	} catch (e) {
	console.log(e.message)
	}

	return {
	props: {
	appPath: urlPath,
	title: previewData?.title \|\| 'Lighter App',
	keywords:
	'Lighter, Lighter App, App game for kids, Collaboration, Multiplayer, Torch Lighter, Entertainment',
	description:
	previewData?.description \|\| 'Lorem ipsum dolor sit amet consectetur adipiscin elit bla bla bla...',
	}, // will be passed to the page component as props
	}
	}
	const destinationHost = 'https://lighter.com'

	module.exports = {
	async rewrites() {
	return [
	// All routes from the LP
	{
	source: '/:path*',
	destination: '/:path*',
	},

	// Static files of the App
	{
	source: '/favicon.ico',
	destination: `${destinationHost}/favicon.ico`,
	},
	{
	source: '/static/:path*',
	destination: `${destinationHost}/static/:path*`,
	},
	{
	source: '/fonts/:path*',
	destination: `${destinationHost}/fonts/:path*`,
	},

	// Redirect to the App the routes already processed
	{
	source: '/:path*',
	has: [{ type: 'query', key: 'from_landing' }],
	destination: `${destinationHost}/:path*`,
	},

	// Specific App router with Link Preview
	{
	source: '/board/:path*',
	destination: `/_preview/board/:path*`,
	},
	{
	source: '/battles/:path*',
	destination: `/_preview/battles/:path*`,
	},
	{
	source: '/maps/:path*',
	destination: `/_preview/maps/:path*`,
	},
	{
	source: '/character',
	destination: `/_preview/character`,
	},

	//
	{
	source: '/:path*',
	destination: `${destinationHost}/:path*`,
	},
	]
	},
	}