Next.js introduction and setup guide
If these thoughts came to your mind upon hearing about Next.js “Meh.. yet another JS framework” or “I can do this on my own, this will just give me more pain” or “JS ecosystem fatigue”, then this article is perfect for you.
In my opinion, Next.js is not “just” another framework rather it is precisely what the frontend community needed and even if you are not using React, still how this framework has been designed and the ease of use it provides is mind-blowing and provides a lot in terms of learning.
What makes Next.js unique and special
Ease of use is at the core of this framework. For any tool or language to be successful it needs great adoption and also a great community that can help you directly or indirectly.
A special focus has been given to ensure that using this framework is Developer-friendly and also there is a vast list of examples that helps you in most of the scenarios that you might need while setting up a new project.
Setup
Next.js support React out of the box along with it it also supports CSS modules and other features which make your development environment a delight for you. In this section, we’ll discuss step by step how the setup of the project is done and we can customize the project to add support for TypeScript, Styled components, create new pages.
1. Initialize the project
The first step is to install all the dependencies that are needed to do the basic setup of the framework. We’ll set up an application named “test-app”.
To initialize the project just type this command on terminal
Once this command is executed create-next-app package will be installed and executed which will start installing packages needed for bare minimal setup of the project and you’ll be prompted to specify the name of your project where all the files will be created
Once the dependencies are installed some handy commands are printed on the terminal that you can use to start the project
For starters, we’ll be only using “yarn dev” command.
2. Start the project
In the previous step, the project was bootstrapped via create-next-app package and also installed all the dependencies for the project and also completed the setup of a development environment as well.
W00t!! Does it say the server is already up? But we just used 2 commands and didn’t install any dependencies when we came in our project’s working directory. If you open the URL in your browser, you’ll see content similar to this
So the content says I can start editing the page already and that’s what we’ll be doing.
3. Customising the Content
We’ll trim down the content written in “pages/index.js” file to make it simpler and will just display a simple message by using some of the predefined styles
And you’ll see that as soon as you save the changes, the content will be updated on the browser without any need to manually refreshing the content.
hot-reloading is provided by the framework out of the box.
4. Creating new pages and managing routing
Next, we’ll create a Status page and will provide a link from our home page to the Status page. But we just do not want to create another page we also want to ensure certain guidelines are met:
- SPA transition
- Code splitting
- And easy integration
Remember till now we have not configured anything related to Code splitting or routing and nothing specifically for SPA behaviour. Usually setting all these features in your project needs knowledge about your bundler and you might also need a library like react-router to manage the routing.
But first thing first, let's create the Status page
- Create a file name status.js and place it under “pages” directory.
- In “pages/index.js” file make following changes
* import “next/link” module
* Add a link to the status page
- And
When you click on the newly added link on our main page:
- The Status page works like a charm
- SPA behaviour is supported via “next/link” module(internally uses router)
- The chunk for status.js is lazily loaded when we click on the link for the Status page
** Next.js provides routing out of the box which and uses Convention over configuration to make creating and linking pages easier. Name with which file is created under “pages” directory becomes the URI to access the content.
5. Supporting TypeScript
I personally love using typescript especially because of the typing ecosystem it provides. If you do not plan to use typescript feel free to skip this step.
We’ll change the name of the newly created Status page from
“status.js” ->”status.tsx”
Restart your dev server since we renamed one of the files and not its content
When you restart your dev server following error is printed on the console, which is expected since Typescript is not supported out of the box by Next.js
It also contains the information what needs to be done in order to use typescript. Upon adding the suggested modules, let's try once again to start our server. Remember we have not created tsconfig.json yet, which is needed for typescript.
Once Next.js sees that the required dependency to support TS is available, it searches for tsconfig.json, if the file is not found a file is created with the default configuration and your pages are once again accessible.
6. Supporting Emotion.js — styled
To support a custom library like previous we need to add the dependencies.
yarn add @emotion/core @emotion/styled emotion emotion-server
Once packages are installed, restart the server and you can make changes in your status.js file or any other file. Below is a sample code:
Conclusion
Personally, I feel that the features and convenience provided by Next.js are what our ecosystem required. Our community has created many amazing frameworks for many years now and continue to do so even today. But with too many options many developers started to complain about developer fatigue.
Next.js definitely solves a lot of problems that developers faced and it also comes with equally great documentation and lot of examples that you can use to quickly set up your project.
