How to create a blog with Next.js 10
What is Next.js?
Next.js is a Static Site Generator (SSG) based on React.
According to the official website:
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Why choosing Next.js over Gatsby?
Vercel recently released Next.js 10, a stunning combination of power and simplicity.
The popular rival Gatsby provides a lot of features and a wide range of plugins, but the overhead and the compulsory use of GraphQL might be considered overengineering by some users.
Gatsby still represents a valid tool, as usual it's a matter of trade off and personal taste.
One small step
Vercel provides several examples to be used as templates for your projects.
A good starting point is certainly blog-starter, which can be seen in action here.
It can be installed by executing:
npx create-next-app --example blog-starter blog-starter-app
# or
yarn create-next-app --example blog-starter blog-starter-app
if you prefer TypeScript:
npx create-next-app --example blog-starter-typescript blog-starter-app
# or
yarn create-next-app --example blog-starter-typescript blog-starter-app
Just replace blog-starter-app
with the name of your project.
You can take a look at a local preview as follows:
cd <your-project-folder>
npm run dev
Browsing http://localhost:3000 you'd see the result.
It looks pretty nice already, doesn't it?
One giant leap
Opening the project on your favorite editor (e.g. Visual Studio Code) you'd see this folder structure:
The most important folders are:
_posts
, your posts in*.md
files (*.mdx
are supported as well)components
, React components for the UIpages
, a special folder where the magic happens, files and folders here give your project structure as well as routing (more details below)public
, where assets are stashed
A post on your blog would be a Markdown file with metadata used by Next.js to build a static page accordingly. Information such as cover image or excerpt published on the homepage would appear here.
For example, this post...
...would be rendered like this:
Second star to the right
Next.js has a file-system based routing, which detects subfolders and files in the special directory called pages
creating routes accordingly.
Let's take a look at pages
:
It comprises the following files:
index.js
is the homepage of the site_app.js
allows to introduce customization, such as styles, to be applied application wide_document.js
allows to restructure the document as in the whole HTML document encapsulating your application[slug].js
represents any given post, its name contains[]
because it's leveraging dynamic routing
When you create a post as Markdown file in _post
folder, the file name determines implicitly the slug of your post.
If your file is called hello-world.md
, then its slug will be hello-world
.
Next.js takes the relative path pages/blog/[slug].js
and generates the route /blog/:slug
, which in this case would be /blog/hello-world
.
For further information please refer to this documentation.
And straight on till morning
Feel free to explore the components
folder and make changes to meet your needs.
Since they're mere React components they will probably look familiar.
Conclusion
Next.js is quite opinionated and might feel odd at first maybe, but its gracious learning curve and the elegant minimalistic API design make it a phenomenal tool to add to your belt.
Setting aside personal tastes, Next.js is certainly worth your time.
The mystery of life isn't a problem to solve, but a reality to experience.
ā Frank Herbert, Dune