This content originally appeared on DEV Community and was authored by Barnabas Babatunde
Introduction:
In this article, I am going to walk you through the introductory aspect of Next JS and how to setup a Next JS project.
What Is Next JS?
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.
Why Should You Use Next JS over Traditional React JS?
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.
...And more!
Ordinary React JS does not provide these juicy features.
Should You Do Away With React JS?
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.
Let's Setup Next 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.
Setting Up
The easiest way to kickstart a Next JS application is by using the create-next-app command. So:
create a new folder anywhere you want on your computer and name it whatever you want. I named mine
demo
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 usecreate-next-appto setup a Next JS application anytime you want.So currently, we are in our
demofolder. Now, create your boiler-plate application by runningnpx create-next-app THE_NAME_OF_YOUR_APPLICATION. I will call minedemo-app.
You should see something like this running:
After the process is completed, you should see a notice of completion - something like this:
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.
Let's Walk Through The Folders and Files In Our Next JS Boiler-Plate Application.
- 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. Thisindex.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.
Launching Our Application In Our Browser
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: http://localhost:3000/.
Notice that the landing page is what is contained in our index.js file.
Conclusion
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 create-next-app.
This content originally appeared on DEV Community and was authored by Barnabas Babatunde
Barnabas Babatunde | Sciencx (2021-06-07T00:40:10+00:00) Next JS – Intro And Setup. Retrieved from https://www.scien.cx/2021/06/07/next-js-intro-and-setup/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.