Khaitan

Khaitan

1612358337

Next.js Tutorial - Dynamic Routes (Part 2 - getStaticPaths)

In this Next.js tutorial we’ll see how to use the getStaticPaths function to generate pages for each of our dynamic routes.

🐱‍💻 🐱‍💻 Course Files:

#next #nextjs #react #reactjs #javascript

What is GEEK

Buddha Community

Next.js Tutorial - Dynamic Routes (Part 2 - getStaticPaths)
Eva  Murphy

Eva Murphy

1625674200

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Khaitan

Khaitan

1612358337

Next.js Tutorial - Dynamic Routes (Part 2 - getStaticPaths)

In this Next.js tutorial we’ll see how to use the getStaticPaths function to generate pages for each of our dynamic routes.

🐱‍💻 🐱‍💻 Course Files:

#next #nextjs #react #reactjs #javascript

Next.js Tutorial : Static and Dynamic Routing

Hello everyone! Around one month ago I wanted to start building SSR and SEO Friendly Websites using React and started looking for a nice tutorial for Next.js — One of the best available tools — of this purpose. But I couldn’t find one. So I decided to create one of my own, which turned into this article.

Image for post

Why SSR?

I don’t want to dive deep into the basic comparisons of SSR and CSR but in summary, we’re covering some different and concepts of SSR web applications.

**SSR **— server-side rendering — and **CSR **— client-side rendering — are both types of rendering your pages for your clients and customers. In CSR, the server sends a **blank **HTML file to the client and the responsibility of filling it with JS files is on the client’s browser’s shoulders. When you create a React application with CRA, or your boilerplate and deploy it on the server, you create a CSR web application! So, if you open your page source in the browser, you find your div with root id EMPTY!

Image for post

Empty page source in CSR web applications

But in SSR web applications, you will render your HTML file on your server, then send it to the client browser. This approach has two benefits:

1. Faster page loading and better experience for clients (The horrible blank loading page!). It’s faster because your servers are a lot more powerful than most of your clients!

2. It’s SEO friendly and google crawlers have everything in Page Source.

You can read about CSR and SSR in the great article of Alex Grigoryan here in The Benefits of Server Side Rendering Over Client Side Rendering!

Why Next.js?

Honestly, you can create your SSR React Web Application without using any framework or tools. But it’s so hard and complex and you have to spend a lot of time to fix its bugs! There are some tools that can help you to overcome mentioned challenges like Razzle, After JS, Next JS, and Gatsby. But the most powerful and featured framework is Next.js!

Here are some of Next.js’s benefits:

1. Zero Config: Like CRA, you can use Next easily without diving into webpack and babel configurations.

2. Built-in CSS libraries: So you want to use CSS-in-JS or SCSS? Don’t worry! Next provides them for you.

3. Powerful in pre-rendering.

4. Easy and simple configuration

5. Hot reloading: Develop, save, and see your changes instantly!

So, why recreate the wheel? Let’s start using Next.js!

#javascript #routing #nextjs #react-ssr #react-js-tutorials #react

Lilyan  Streich

Lilyan Streich

1599119110

Next js Tutorial For Beginners

Next js Tutorial For Beginners is the today’s topic. It is no secret that creating single-page applications can be immensely challenging these days. But with the help of some libraries, frameworks, and tools, it is effortless nowadays. React.js is the common frontend libraries among the Front-end developers. Its virtual dom theory makes React faster and gives us the better application performance. Now, one problem is that Single Page Applications are not at all SEO  friendly because it is rendered on the Client side  and not Server side . So when the Search Engine crawlers try to send a request, they cannot get our meta content or description and not even the main content. Search Engines do not care about how your app is architected or whatever ideology was used to adjust and fetch the right material. Their bots are not as smart as using your apps as a real user would. All they care about is that once they send their spiders to crawl and index your site, whatever the server provides on the first request is what gets indexed. In our case, all they get is our div tag with an id and bundled JS file, and we can not index our website correctly. So some how, we need a SSR to tackle this problem and in React js, Next.js is the perfect solution.

#js #react.js #next.js