We have to assert that React is a great choice for building high quality web apps. However, things get more complicated, you need to learn about client-side routing, page layout … At some point you will need your page to load faster, so things will get complicated. than.
Next.js and a popular JavaScript framework that runs both on the browser client and on the server. It provides developers with an easy way to get started and it uses the React template, which is also a simple way for React developers to get effective next learning quickly.
One of its strengths is its excellent server-side rendering, and it integrates well with Express.
What is server side rendering?
Server side rendering is the usual method of putting your html on the screen. This refers to using a server to submit your html to the browser
So why is it troubling if it’s the conventional method that’s been around for so long?
Remember the introduction of the MVC concept caused some concern. Essentially, there was some disagreement that ultimately led to the proliferation of Javascript frameworks for rendering views.
So what does this have to do with?
Before long, a problem emerged: javascript frameworks only rendering one type of div in the browser, using DOM manipulation to do its work around the browser. This means users have to wait longer to see anything. It can also affect SEO if a crawler is unable to quickly see the content of a page.
One solution is to display the Javascript files from the server side before returning them the output from the server.
Get started with Next
Getting started is very simple. All we need to do is create a new directory, start a new project node, install Next and the React DOM.
1 2 3 4 5 6 7 8 9 | #make a directory mkdir logrocket-next #change to the new directory cd logrocket-next #init a new node project npm init -y #install react, react-dom and next npm install --save react react-dom next |
Next, open the package.json file and replace it with the following:
1 2 3 4 5 6 | "scripts": { "dev": "next", "build": "next build", "start": "next start" } |
Run the command npm run dev , you will get an error like:
1 2 | next > Couldn't find a `pages` directory. Please create one under the project root |
This is because Next uses the pages directory and the files in it to establish routes. This means if we have a file called index.js in our main page directory, Next will try to use the components in it just like the entry point. Let’s create the pages folder and the index.js file
1 2 3 4 5 | #create pages directory mkdir pages #create file for base route touch pages/index.js |
Next, add the code to pages/index.js :
1 2 3 4 5 6 7 | const Index = () => ( <div> <p>Hello Next.js, this is your friend Brian from logrocket</p> </div> ) export default Index |
continue…