In this article, I am going to walk you through the introductory aspect of Next JS and how to setup a Next JS project.
Next JS is a framework (built on-top of React JS) that allows us to create pre-rendered React websites.
Pre-rendering could either be by:
- Server Side Rendering (SSR), or
- Static Site Generation (SSG)
Server Side Rendering:
In Server Side Rendering, React components are rendered (think of it as 'translated') into HTML pages on the server and sent to the browser whenever the browser requests for that particular component.
Static Site Generation:
In Static Site Generation, React components are 'translated' into HTML pages at build time. These pages can then be deployed to the web.
Next JS gives us the ability to use either of these methods. Whichever method you decide to use, one thing is sure:- Your React components have already been 'translated' into HTML by the time they arrive at the browser.
React works by rendering components in the browser (client-side) unlike Next JS which does it on the server-side.
Server-side rendering and Static Site Generation (in other words, using Next JS) helps to/provide:
- improve a website's performance on the client-side. This is because the rendering is already done on the server, and the browser is relieved of the task of rendering the components. Better client-side performance!
- better Search Engine Optimization (SEO). This is because a fully rendered HTML page arrives at the browser, which is more acceptable to search engine crawlers.
Ordinary React JS does not provide these juicy features.
Absolutely not. You need a good knowledge of React JS in order to work with Next JS. In fact, Next JS is simply a framework built on another framework: React JS.
You will need Node JS, so ensure you have Node JS installed on your computer. If you don't, go to nodejs.org to download and install Node JS.
The easiest way to kickstart a Next JS application is by using the
create-next-app command. So:
fire up your command line, and change your working directory to that folder by using the command:
cd ABSOLUTE_PATH_OF_YOUR_FOLDER. Make sure you are now within that folder, as should be indicated on your command line interface.
Ensure that you already have
create-next-appcli in your Node JS environment. If you do not then run the command:
npm install -g create-next-app. This will allow you to use
create-next-appto setup a Next JS application anytime you want.
So currently, we are in our
demofolder. Now, create your boiler-plate application by running
npx create-next-app THE_NAME_OF_YOUR_APPLICATION. I will call mine
You should see something like this running:
Check your project folder. You should see your boiler-plate application all nicely setup.
Now, we want to build out our web application, so we open our boiler-plate folder using our favorite text editor. Mine is VS code.
- node_modules: This is where all the dependencies for our application are stored.
pages: This folder is where all our page components will be created. Every web page in Next JS has its corresponding React component. Currently, we have
index.jspage component in the pages folder. This
index.jsis the landing page of our website.
- _app.js: This is where all our page components are rendered. It is the root component of our application.
- /api: This is for our API endpoints.
- /public: This is where all public assets are kept. Examples of public assets are images, or font files.
- /styles: This contains styles for our web application.
- .gitignore: For version control. Used to exclude files and folders from being committed and pushed to your remote git repository.
- package.json: Helps you keep track of your application's dependencies.
- package-lock.json: Helps to keep track of the exact version of every package(or dependency) that is installed in your application.
- README.md: Contains information about your application and its development.
Change directory to your new boiler-plate application, by running:
cd THE_NAME_OF_YOUR_APPLICATION. After that, run:
yarn dev or
npm run dev. This command invokes a local development server for us on port 3000. You can now see your website at this address:
Notice that the landing page is what is contained in our
In the last few minutes, we have gotten a soft introduction to Next JS, and we have learned how to setup a Next JS application using