How I learned Next.js
About me
I am a full stack developer and tech enthusiast. I fell in love with javascript some years back and it became my default go-to language for most projects I worked on. Over the years, I have used javascript to work on both the server side and client side of projects making use of libraries and framework such as react, express js, vue etc.
Why I wanted to learn Next.js
When working on single page applications such as react apps, you realised some issues that have to do with the client side rendering .
First, the app takes longer to become visible to the user, because, before the content loads, all the JavaScript must load, and your application needs to run to determine what to show on the page.
Secondly, Single Page Applications are not at all SEO friendly because it is rendered on the Client side and not Server side. So when the Search Engine crawlers try to send a request, they cannot get our meta content or description or even the main content.
To solve this, we need to find a way to server render the application. Thus the reason behind next.js which is a react framework for server rendered apps.
How I approached learning Next.js
SInce Next.js is a relatively new technology, the easiest way for me to learn the basics was by going through the NextJS documentation and the official tutorial at nextjs.org/learn
The official tutorial does a very good job teaching about the basics of next.js using actual codes which the learner can code along with.
Challenges I faced
Coming from a React background. I was surprised to see that most of the hard work like routing and code splitting is already being taken care of out of the box by Next Js. I just had to get to the realization that things must not always be done the hard way.
Key takeaways
Set up
Setting up a Next Js application is really easy. All you need to do is to:
- run
npm install --save react react-dom next - add the following in your package.json
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
- Create a page directory in the root and add an index.js file, and you are set to go.
Routing
Routing is already being taken care of by Next Js. All you need to do is to keep adding routes as pages to the pages directory.
E.g: To create an about page, I just need to create an about.js file in the pages directory, and then navigate to localhost:3000/about
Error pages
Next Js already handles error pages for us, but if we want a custom error page, we can create a _error.js file in the page directory to create our custom error.
Head component
Next.js gives us a Head component where we can use to manipulate what goes inside the HTML <head> tag. For example, we might want to add more meta information.
import Head from 'next/head'
export default () => (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
Tips and advice
Next Js comes with a whole lot of features which makes server-side rendering of react applications really easy. These features include Hot Code Reloading, Automatic Routing, Automatic Code Splitting
Prefetching etc.
The only way to be able to see these featueres in action, is by actually building a Next Js app. So in as much as you go through the guides and the docs, you need to actually get your hands dirty building simple projects to be able to understand it better.
Final thoughts and next steps
I can’t possibly describe every feature of this great framework, but I will advise anybody interested in learning to just head to the project's readme on GitHub.
Next Js has now become my default framework for building react applications.
