Creating a Blog with Next.js and Markdown - Part 2

This is in continuation to Part 1

What is great about the way we did this (using Next.js) is - we can now export this as a static website. The static website can be deployed anywhere now!

Update build script - use next export

Notice in package.json, there is a command called build. This is build script.

npm run build 

npm run build will build for production, but there is one more command called next export that will export you site as a static website.

We can add it to the build script in package.json

"build": "next build && next export"

Save package.json

Cut off the server (That you may have started. It is started using npm run dev. If already running, stop it) . (Close by Ctrl + C etc.)

Time to build

npm run build

This will create a folder on root called out that will have the static site.

Got some warnings and errors:

1. Do not use

Do not use <img> . Instead use Image from next/image - this is what the next build process tells in error. However, it is not mandatory and can be overridden like below: (infact I got it as a warning in latest Next.js version 12.1.4 , not as a Error ;)

My Warning:

1. Error: Missing “key” prop for element in iterator

In the home page, list of Posts - each post should have a key (and unique key) We can easily add it as the index of array item.

After fixing all errors, (like class was used instead of className)

Finally running again npm run build and success!

Export successful. Files written to ___________\out

Now you can test (serve this static site locally)

Use for e.g. a package called serve

Install it globally

npm i -g serve

now run

serve -s ./out -p 8000

But got this error on my Windows machine:

About this error:

.ps1 cannot be loaded because the execution of scripts is disabled on this system

based on this answer

Worked!

Opening the static site at localhost:8000

Its working!

Its a static website you can deploy it anywhere!

Done testing.

Deploy!

I am going to deploy to Vercel.

• Vercel is great for any nextjs website - static, whether it uses API routes, anything

1. Create an account on Vercel
2. Create a new github repo (I already had)
3. Deploy from the github repo to Vercel - its fairly straightforward.