Get Started With Next.js - Learn From A Newbie

Next.js is an open source react framework.  Using server side rendering Next.js can preload the Javascript and CSS of a page. That makes rendering fast and quicker. Which is also essential from search engine optimization(SEO). This makes next.js very powerful.  The framework is currently used by many large websites like Netflix, Uber, Github.

Setup

• Download and  Install Node.js version 10.13 or later.
• Download and Install Visual Studio Code or any other editor you like.

Create A Next.js app

• Open your terminal and run "npx create-next-app next-calculator". This will create a next js app named 'next-calculator'.
• Run the following commands 
• "cd next-calculator/" 
• "code ." : this will open your project in vs code

Run Your App

• Run "npm run dev" to run your app. 
• Now visit 'http://localhost:3000'
  from your browser and you will see default next js app page.

                

File Structure of Next.js App

     NEXT-CALCULATOR

   │ 

    ├── pages

    │      │── api

    │      └── index.js

     |───public

    └───styles

 

• Pages is where you will place your website pages. Delete the api directory, we don't it now.
• Files under public folder is accessible publicly, don't place any sensitive information/file under public directory.
• Styles directory is for global CSS styles of you website.

Open Index.js and make some changes. On line 14 replace 

                    Welcome to <a href="https://nextjs.org">Next.js!</a> with  

                Welcome to <a href="/">Next Calculator!</a> and refresh your browser to see the changes.

Fell free to play with index.js file to make more changes. In next blog post will start creating our Next Calculator till then good bye 😀