Challenges

Implement On Page SEO Support

Avoid Hard Coded URLs

If you look at the getStaticProps function of pages/post/[slug].js, you can see this:

post.url = `http://localhost:3009/post/${post.slug}`

Here we use a hard-coded value for the URL. We should try to avoid cases like this. Ideally, we need to get the root URL of our app using an environment variable.

Here's how to do that:

  • Create a file called .env.local in your app's root
  • If you already have a such a file, you can keep using it
  • Then add the following environment variable to it
NEXT_PUBLIC_ROOT_URL=http://localhost:3009
  • Then you can update the post.url with:
post.url = `${process.env.NEXT_PUBLIC_ROOT_URL}/post/${post.slug}`
  • Finally, restart the app
šŸ“œ Visit the Next.js documentation to learn more about handling environment variables.

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: