How To Get Started With NextJS

Nextjs is a Framework for creating pre-rendered React websites by server-side rendering (SSR) or static side generation (SSG).

What is SSR ?

SSR is when react components are rendered into HTML pages on the server after the request comes from the user (browser).

What is SSG ?

SSG when the components are rendered into HTML pages at the build time.

What is the benefits of SSG and SSR in Nextjs?

The benefit of SSG and SSR is that they can improve a website’s performance. because components are already pre-rendered on the server which means less work in the browser, and also better SEO because the response of the server this time is HTML page and not blank page as the case with react application without nextjs.

Now let me create a nextjs project. And to do that we need to run the command : npx create-next-app nextjsdemo (nextjsdemo is the name of the application, it can be whatever you want).

Now let us navigate to the directory that has been created by using cd command plus the directory name. Then to open the project in Visual Studio Code, we type in the terminal code . , and you can use whatever text editor you wish.

Files and Folders Inside Nextjs Project :

• Node_modules folder : here is where all our dependencies are stored.
• Pages folder: here where all our different page components will be created.
• Index.js : is the for the homepage.
• _app.js file : it is like a root component and all the pages components are rendered inside this root components.
• API folder : it is for API endpoints
• Public folder : it is where all of our public assets like images should be.
• Styles folder : it is for all the css files.
• .gitignore file : version control.
• Package.json file : it is to keep tracking the different dependencies.

The “Scripts” object in the package file just above, we have “dev”:”next dev”. It is used to run a local development server for us so we can preview the application in the browser. and to do that, in the terminal, we execute the command npm run dev and the application will start.

This component is rendered before it reaches the browser. During development, this is done through server-side-rendering which means the server renders the component then sends the HTML file to the browser. And that happens for each page requested from the browser. For example, when we type an URL, it will look for the component for that URL pre-render it and send it to the browser.

Any question, don't hesitate to post your question in comment here, or go to the website for much more about Nextjs and other technologies.