Next.js – Quick Guide
”; Previous Next
Next.js – Overview
The Next.js is React Based framework with server side rendering capability. It is very fast and SEO friendly.
Using Next.js, you can create robust react based application quite easily and test them. Following are the key features of Next.js.
Hot Code Reload − Next.js server detects modified files and reloads them automatically.
Automatic Routing − No need to configure any url for routing. files are to be placed in pages folder. All urls will be mapped to file system. Customization can be done.
Component specific styles − styled-jsx provides support for global as well as component specific styles.
Server side rendering − react components are prerendered on server hence loads faster on client.
Node Ecosystem − Next.js being react based gels well with Node ecosystem.
Automatic code split − Next.js renders pages with libraries they need. Next.js instead of creating a single large javascript file, creates multiples resources. When a page is loaded, only required javascript page is loaded with it.
Prefetch − Next.js provides Link component which is used to link multiple components supports a prefetch property to prefetch page resources in background.
Dynamic Components − Next.js allows to import JavaScript modules and React Components dynamically.
Export Static Site − Next.js allows to export full static site from your web application.
Built-in Typescript Support − Next.js is written in Typescripts and provides excellent Typescript support.
Next.js – Environment Setup
As Next.js is a react based framework, we are using Node environment. Now make sure you have Node.js and npm installed on your system. You can use the following command to install Next.js −
npm install next react react-dom
You can observe the following output once Next.js is successfully installed −
+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s
Now, let”s create a node package.json −
npm init
Select default values while creating a package.json −
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to Nodenextjspackage.json:
{
“name”: “nextjs”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“dependencies”: {
“next”: “^9.4.4”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1″
},
“devDependencies”: {},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1″
},
“author”: “”,
“license”: “ISC”
}
Is this OK? (yes)
Now update the scripts section of package.json to include Next.js commands.
{
“name”: “nextjs”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“dependencies”: {
“next”: “^9.4.4”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1″
},
“devDependencies”: {},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1″,
“dev”: “next”,
“build”: “next build”,
“start”: “next start”
},
“author”: “”,
“license”: “ISC”
}
Create pages directory.
Create a pages folder within nextjs folder and create an index.js file with following contents.
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
Start Next.js Server
Run the following command to start the server −.
npm run dev
> [email protected] dev Nodenextjs
> next
ready – started server on http://localhost:3000
event – compiled successfully
event – build page: /
wait – compiling…
event – compiled successfully
event – build page: /next/dist/pages/_error
wait – compiling…
event – compiled successfully
Verify Output
Open localhost:3000 in a browser and you will see the following output.
Next.js – Pages
In Next.js, we can create pages and navigate between them using file system routing feature. We”ll use Link component to have a client side navigation between pages.
In Next.js, a page is a React Component and are exported from pages directory. Each page is associated with a route based on its file name. For example
pages/index.js is linked with ”/” route.
pages/posts/first.js is linked with ”/posts/first” route and so on.
Let”s update the nextjs project created in Environment Setup chapter.
Create post directory and first.js within it with following contents.
export default function FirstPost() {
return <h1>My First Post</h1>
}
Add Link Support to go back to Home page. Update first.js as follows −
import Link from ”next/link”
export default function FirstPost() {
return (
<>
<h1>My First Post</h1>
<h2>
<Link href=”/”>
<a>Home</a>
</Link>
</h2>
</>
)
}
Add Link Support to home page to navigate to first page. Update index.js as follows −
import Link from ”next/link”
function HomePage() {
return (
<>
<div>Welcome to Next.js!</div>
<Link href=”/posts/first”><a>First Post</a></Link>
</>
)
}
export default HomePage
Start Next.js Server
Run the following command to start the server −.
npm run dev
> [email protected] dev Nodenextjs
> next
ready – started server on http://localhost:3000
event – compiled successfully
event – build page: /
wait – compiling…
event – compiled successfully
event – build page: /next/dist/pages/_error
wait – compiling…
event – compiled successfully
Verify Output
Open localhost:3000 in a browser and you will see the following output.
Click on First Link and you will see the following output.
Next.js – Static File Serving
In Next.js, we can serve static pages like images very easily by putting them in public, a top level directory. We can refer these files in similar fashion like pages in pages directory.
In Next.js, a page is a React Component