seo Question posted in
Some basic information to get you started with this can be found here.

NextJS. How do i get canonical URL for dynamic pages? – SEO

Before nextjs 9.4 i have been using
next-absolute-url package which gives origin in getInitialProps.

nextsJs 9.5
since with Automatic optimisation we use getServerSideProps and getStaticProps. the package doesn’t support these methods and return undefined.

My Question is that if we have dynamic page lets say post/[pid].tsx using the next-seo i require canonical url for it how could i generate the with getStaticProps or getServerSideProps.

There is another question asked with no response here
How to access canonical URL in Next.js with Automatic Static Optimization turned on?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So After Update (Removing Redux from Application) the next-absoulute-url does work on getServerSideProps.

    If application state is not too complex React-context API with Hooks work greats. have a read here https://kentcdodds.com/blog/application-state-management-with-react


  2. 0

    If you need to get the pid from the url, you need to use router.query in the dynamic route page,
    which will give you an object like
    {"pid":123}

    // post/[pid].tsx

import { useRouter } from 'next/router'

getStaticProps(){
 const router = useRouter();
 const pid = router.query.pid;
 return {props:{pid}}
}

    I found the perfect documentation for this in this url – https://nextjs.org/docs/routing/dynamic-routes

    Login or Signup to reply.
  3. 0

    this works fine for me

    //_app.tsx

import type { AppContext, AppInitialProps } from 'next/app';
import App from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { store } from '@@/redux/store';
import { Provider } from 'react-redux';

import Continuous from '@/components/_pages/Continuous';
import GlobalHead from '@/components/_pages/globals/Head';
import Layout from '@/components/Layout';

type IProps  = { canonical: string}

class MyApp extends App<IProps> {
    static async getInitialProps({ Component, ctx, }: AppContext): Promise<AppInitialProps<any> & IProps> {
        const { locale, defaultLocale, asPath } = ctx;
        const _locale = locale === defaultLocale ? '' : `/${locale}`;
        const _path = asPath === '/' ? '' : asPath;
        const host = 'https://focus-hours.com'

        return {
            pageProps: Component.getInitialProps ? await Component.getInitialProps(ctx) : {},
            canonical: `${host}${_locale}${_path}`,
        };
    }

    render(): JSX.Element {
        const { Component, pageProps, canonical } = this.props;

        return (
            <>
                <GlobalHead />
                <Head>
                    <link rel="canonical" href={canonical} />
                </Head>
                <Provider store={store}>
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                    {_isClient && <Continuous />}
                </Provider>
            </>
        )
    }
}

export default appWithTranslation<any>(MyApp);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search