Next.js is a React framework developed by Vercel that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.
Next.js is a lightweight open source JavaScript framework built on top of the React library that enables quick server side rendering and is server agnostic (i.e. use with its own built in HTTP server or use with any Node.js server). It is put out by the folks at Zeit. Routing is simply done by the page and makes getting a website up and running easy and quick. In fact, we're going to do in 5 minutes or less.
Why Next.Js?
1) Relatively easy to learn
That’s it. If you’ve written any React at all, you’d find yourself at home with Next.js. It offers you advanced tools and a robust API support, but it doesn’t force you to use them.
2) Built-in CSS support
Writing CSS in component-driven frameworks comes with a sacrosanct need for the “cascade”. It’s why you have CSS-in-JS tools, but Next.js comes out of the box with its own offering — styled-jsx, and also supports a bevy of styling methodologies.
3) Automatic TypeScript support
If you like to code in TypeScript, with Next.js, you literally have automatic support for TypeScript configuration and compilation.
4) Multiple data fetching technique
It supports SSG and/or SSR. You can choose to use one or the other, or both.
5) File-system routing
To navigate between one page to another is supported through the file-system of your app. You do not need any special library to handle routing.
Installation
We'll use NPM to install Next.js along with its dependencies.
First we'll make a directory to hold our Next.js project and go into it:
mkdir my-portfolio-site
cd my-portfolio-site
Then we'll initialize it with a package.json file and use the y flag to just go ahead and do it and skip the questions: npm init -y.
Now we are ready to install Next.js:
npm install react react-dom next
Next.js is not super opinionated on how you structure your project, with one exception. All your actual web pages need to go inside a pages folder, so let's go ahead and create it: mkdir pages.
Lastly, let's go ahead and update the package.json with the run script language to initialize our Next.js app. Open up the package.json file and add the following under scripts:
"dev": "next",
"build": "next build",
"start": "next start"
Great, we've now installed Next.js. So lets dive into it.
Creating The First Component
Remember that Next.js is just JavaScript and rests on top of React, so all we need to do is build some components. Routing is done by the name of the component, so for example, mysite.com/blog, would be from a blog.js named file in the pages directory.
Open up the project in your favorite code editor and create a file called index.js in the pages directory.
Let's create a component that returns some HTML!
const Index = () => (
<div>
<h1>My Portfolio Site</h1>
<p>Welcome to my portfolio! This is designed with Next.js!</p>
</div>
)
export default Index
Now if you run npm run dev from the command line and navigate to http://localhost:3000 from your web browser you will find this content being served.
Working with Link API
Don't we all love the page rendering in React? We can accomplish the same client side navigation with Next.js using the Next.js Link API. Let's say our portfolio site had a Contact page, so we would have an updated Index component that looked like this:
import Link from 'next/link';
const Index = () => (
<div>
<h1>My Portfolio Site</h1>
<p>
Welcome to my portfolio! This is designed with Next.js!
Please{' '}
<Link href="/contact">
<a>contact me</a>
</Link>{' '}
to get more information.
</p>
</div>
)
export default Index
First, we imported the Link API module from Next.JS and then we used it inline in the midst of our content by making a placeholder for it with the {' '} syntax. The component is a Higher Order Component and supports only a couple arguments such as href (and href argument itself supports arguments like query strings and the like) and as for URL masking. The underlying component, in this case a tag supports other props like style and onClick.
Making Smaller Reusable Components
Now we are off to a great start, but can you imagine having to rewrite our header for every page we create? That's why we break up our site into small reusable components!
Next.js has no opinion on how you should do this. But, remember, if you put them in the pages directory they will be accessible to to the outside world directly. Do you want someone directly accessing your header, navbar and footer? If not, then place them outside it. Go ahead and create a components top level directory: mkdir components and touch header.js to create a header.js file.
Open up the header.js file in your code editor and create a header component!
const Header = () => (
<div>
<h1>My Portfolio Site</h1>
</div>
)
export default Header
Then go ahead and go back to your index.js file and incorporate your new header:
import Link from 'next/link';
import Header from '../components/header';
const Index = () => (
<div>
<Header />
<p>
Welcome to my portfolio! This is designed with Next.js!
Please{' '}
<Link href="/contact">
<a>contact me</a>
</Link>{' '}
to get more information.
</p>
</div>
)
export default Index
Now all that new component did was save us one tag, but it doesn't take much imagination to understand that in a real world site there would be a lot more there than just one HTML tag.
We have now successfully installed Next.js, initialized a new project, created components, linked to them using the Next.js Link API and reused components across our project. This is a great foundation to build from.
There is a lot more to Next.js like CSS in the JavaScript, custom server (for example, using Express), passing state between pages and so much more. Please check out the documentation to take an even deeper dive and enjoy taking the next step with Next.js!
Thanks for reading.
Latest comments (8)
I am currently trying to learn Next.js after some projects in Gatsby.js. While Next. js certainly is nice, it IS harder to work with some things than Gatsby.js. Plugins are just harder to implement, because you have to do more things manually + Gatsby. js has a large amount of premade plugins by the community. While GraphQL is super nice I feel that Gatsby rely too heavily on it to some extent. And this part is certainly better in Next. But something like getting the styled components library up and running in a Next application is surprisingly difficult.
Next has a premade template for styled components you can run when instead of the normal create-next-app, works great. Same as CNA but with the _document created and ready to go.
Thanks Caleb. I got thinks working. It's not that things are impossible complicated in Next.js but for someone not super comfortable with Jamstack I would say that Gatsby.js is easier to get up and running. The downside of Gatsby. js is that you tend to rely on all these small plugins made by the community, and when something brakes you have to wait for someone else to fix the bugs...
After all, the process here in React works for providing a better efficiency in usage of third party libraries. And Gatsby or Next.js both are working well as a top layer for React. It depends on what you get first introduced with. The community support works out for both
Yeah, sure! We are comparing two great libraries, and they are both great! You can do things in next that are difficult to pull off in Gatsby. But generally I still feel Gatsby is easier to get started with. I actually work in next.js on a project right now, but will sure be back in Gatsby again 😊
I love using Next.JS. Especially Vercels free tier is great for personal projects. I use it to host my personal site. where it took me a few hours to create and deploy it without any configuration.
Yes. The server side ease and routing is way better for a production build.
Nice post