How to create a blog with Next.js 10
What is Next.js?
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?
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.
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
blog-starter-app with the name of your project.
You can take a look at a local preview as follows:
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
*.mdxare supported as well)
components, React components for the UI
pages, 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
It comprises the following files:
index.jsis the homepage of the site
_app.jsallows to introduce customization, such as styles, to be applied application wide
_document.jsallows to restructure the document as in the whole HTML document encapsulating your application
[slug].jsrepresents 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
Next.js takes the relative path
pages/blog/[slug].js and generates the route
/blog/:slug, which in this case would be
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.
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