Adding metadata

Adding head elements:

  • description metatag: shows up on google search results.
  • title

import a special component by nextjs: Head

import Head from 'next/head'

wrap with Fragment from react:

add <title> in <Head>

Inspect - it gets added.

<meta name='description' content = ''>

We can do this on all pages.

Add this to:

  • Homepage
  • [noteId].js - get title, description from props
  • Add Note

Deploying the Site! 😍

Vercel

Signup with a git repo provider. You will link your repo and deploy using it.

GitHub - most popular git repo provider.

Create PAT (personal access token). I just used SSH that was already setup.

In package.json

we can use build script with other hosting providers: but here with Vercel, dont need to use it. Might need to do it using build with other hosting providers.

npm run build

Vercel will also do it but automatically on its servers. (creates a .next folder)

If not using Vercel, npm start starts a production server. You can do it on a remote server, that you administer, to run the server for your next application.

Ofcourse that server should stay up and running, as long as you want to expose it to the world.

Can set environment variables.

MongoDB - allow access

Network Acces > ALLOW ACCESS FROM ANYWHERE This ensures that the vercel servers will be able to connect to the mongoDB (credentials to access the server)

Set fallback to true or 'blocking'

We set fallback to false till this point. But now set it to true or 'blocking'

This tells nextjs that the list of paths which we are specifying during build might not be exhaustive - So if nextjs cant find the page that is requested, instead of showing 404. it will pregenerate it if needed

Both pregenerate the file when needed.

true - immediately return an empty page, and pull down the dynamically generated content. You have to handle the case when page does not have the data yet.

'blocking' - User will not see anything unless the page is pregenerated with all the data needed - and finished page will be served.

To publish this change, just do git add . git commit -m "fix fallback" git push

that’s it! Vercel will automatically trigger the build! Vercel watches the GitHub branch.

If hosted elsewhere, you need to

  1. Login into that remote machine
  2. Stop the running server
  3. run npm run build
  4. then run npm start

You can do more:

  • Connect custom domain
  • Configure more.
  • ways of optimizing images
  • add authention with ease with next.js

This and more on dedicated next course of Maxmilian.