Next.JS is the one of the most popular React framework where we can build full-stack applications without leaving the project and using Next.js completely. To start with it

npx create-next-app@latest app-name

By running this command, the terminal prompt us some questions about the project and in the end, it’ll create a boilerplate for our Next.js project.

Comparing to the React, file structure is a bit different but in the end, we’ll be writing React/JSX codes to work with Next.JS.

Our homepage is gonna be page.js component within the app folder. And if we like to create new pages, we just need to create new folders within the app folder and each folder need to have it’s own page.js file and also the folder structure will serve as a URL in our app. What does it mean?

When we are working with Next.js, we don’t need third-party router solution to create multi-page like app with it, it does come with a routing solution by default and each folder we add will be the parameters of that specific page on the url.

This is our file structure in a Next.js app. To navigate into about page we just need to write localhost:3000/about on the browser address bar. And page.js within the about folder will serve as an about component in the app.

<aside> 💡 We can use any of js, jsx, ts, and tsx extension in our Next.js project, it’s all supported.

</aside>

Layout.js

It’s our root file/component in next app. We can think like index.js/index.html in a regular React app. It’s the entry point of our app. We can add something in our layout if we like but it does not rerender when the route changes. We need to be careful about it, if something needs to get updated on UI after the route changtes then handling it inside the layout file is going to be wrong. Also it cannot pass data down two pages from layout.

There are two component types in Next.js, one is the client component which we know from React and it can use all of the react features like hooks, the other one is server component, it compiles in the server and send to the browser as an html file in the end. Next.js does dome with the server component out of the box but if we want to use client components too, we need to define that by using ‘use client’ keyword on the top of the component.

`ClientComponent.jsx`

'use client'
import {useState} from 'react'

const ClientComponent = () => {
const [count, setCount] = useState(0)

return (
	<div>
		<h3>{count}</h3>
		<button onClick={() => setCount((count) => count +1}>Increase</button>
	</div>
)
}

export default ClientComponent

If we try to use hooks in server component, the app will break immediately and will give an error like down below.