Creating your first Next.js App

Share

This article is the first part of the Next.js tutorial on CWS. If you are interested in reading about the evolution of Next.js, there is an article on the brief story of Next.js.

What is Next.js?

All right, So what is Next js and why would we use it? well, basically it’s a react framework, that allows us to create pre-rendered react websites whether that be via server-side rendering or static site generation.

Now, server-side rendering is:– when React components are rendered into HTML pages on the server after a page request comes from the browser. Static site generation is when components are rendered into HTML pages at build time so that we can just deploy the web pages and javascript bundles to the web and Next.js allow us to easily do both of these things.

our react components are already rendered into HTML pages by the time they reach the browser. Now, from that point onwards the application can behave more like a SPA in which all routing can be handled on the client-side, in the browser.

In contrast to this, without Next, React renders components in the browser instead and this is known as client-side rendering.

Server-Side Rendering & Static Site Generation

Now the benefits of server-side rendering and static site generation are:

Firstly, it can improve a website’s performance because components are pre-rendered. This means less work in the browser.

Secondly, it results in better SEO than traditional single-page applications. It is because the response from the server is a fully rendered HTML page rather than just a blank one which is what would be returned in a regular react application without Next.js.

so in the eyes of search engine crawlers, it makes our site much more palatable.

# Prerequisites

Now before you start this, you should already have at least a basic to a good understanding of React. Also,node.js installed on your computer. you’ll need version 10.13 or later installed so if you don’t have that head to nodejs.org to download and install that on your computer.

# Creating Next App

Let’s start by creating a new next application. now, the easiest way to get started with Next is to use a command called create-next-app. Much like create-react-app for making React applications.

Open up a terminal and navigate to a directory that i want to create.

It’s going to generate boilerplate a new Next application for us called blog in my case. so once that’s done, navigate into that new directory it’s created and open this project up in visual studio code.

So this right here my friend is the starter next project generated for us. so I just wanted to give you a quick walkthrough of all of the different folders and files we have in this starter project. so that you’ve got a rough idea of what they are.

# Understanding Folder Structure

  • node_modules: First of all, we have the node modules at the top that’s where all the dependencies are stored
  • pages: this pages folder is where all of our different page components are going to be created. we have an index.js file and this is going to be for the home page.
  • app.js file: This is kind of like the root component and all of our different page components are rendered right here so all of our pages go in there.
  • api folder: This is for api endpoints.
  • public folder: This is where all of our public assets like images go.
  • styles folder: This is for different CSS files including CSS modules.
  • .gitignore file: This is for version control.
  • package files: This is to keep track of our different dependencies and we also have these scripts in the package.json file.

So we have a dev command that we will be using and that runs next dev and what that does is spin up a local development server for us and we can preview our application in a browser.

# Running Development Server

To fire up the local development server, enter the command npm run dev and press enter. Now it should spin up a local development server, so we can preview the website now at this address right there localhost port 3000.

Control-click the server URL i.e. http://localhost:3000 to open it up in a browser.

we can see the website over here. this content right here is all created inside that index component.

Now get rid of all of the stuff in the index.js file and replace it with just a div. Then inside that div, we’re going to do an h1 that says homepage.

//pages/index.js

export default function Home() {
  return (
   <div>
     <h1>HOMEPAGE</h1>
   </div>
  )
}

Saving it gonna automatically refreshes in the browser and now we can see new content.

Now, remember that this component is being pre-rendered before it even reaches the browser during development. This is done via server-side rendering. so the server renders the component and then sends the HTML file to the browser. This happens on each page request from the browser.

So if you type in a different URL, it will look for the component for that URL, pre-render it and send it to the browser. later on, in this series, we’ll see how to have the pages rendered at build time for production — a process called static site and generation.

so anyway that’s the project at a glance. next, we’re going to dive into how Next.js handles routing and pages.

Share
Sudeep Mishra

Sudeep Mishra

Healing

%d bloggers like this: