Forem: Yash Kapure

What’s New in Next.js 14?

Yash Kapure — Thu, 18 Jan 2024 17:20:49 +0000

Hey there! Just caught the Next.js Keynote online and, let me tell you, it’s a game-changer. I’m stoked to give you the quick and dirty rundown of what’s new and why it matters.

No fluff, just the good stuff.

Ready? Let’s jump in!

Next14
Turbopack: A New Engine for Speed
Let’s cut straight to the chase.

Next.js 14 introduces Turbopack, a Rust-based engine that boosts your local development like never before.

next dev --turbo

It’s not just hype; the data proves it. You can look forward to a 53% faster local server startup and a 94% speedier code update with Fast Refresh.

Imagine getting all these performance benefits without changing a single line of code in your existing Next.js project!

Server Actions: Streamlining Data Mutations
Ever thought of triggering server-side code without the need for a dedicated API route?

Next.js 14 brings Server Actions into a stable release.

It’s a game-changer for the developer experience. Now, with just a function defined in your React component, you can perform actions on the server securely.

Here’s a simplified example:

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

This not only simplifies your code but also enhances the user experience by reducing the number of network roundtrips needed for mutating data and re-rendering the page.

Partial Prerendering: The Best of Both Worlds
Partial Prerendering is in preview, but it’s already exciting.

With the ongoing debate between SSR and SSG, Next.js has decided to bring you the benefits of both worlds.

It provides a fast initial static response while streaming dynamic content based on your React Suspense boundaries. So, you get the performance of static sites and the dynamism of server-rendered apps.

Again, no new APIs to learn

Metadata and Other Under-the-Hood Changes
Metadata options like viewport, colorScheme, and themeColor have been revamped to improve the initial rendering experience and reduce layout shifts.

Also, Next.js 14 has new deprecations and breaking changes to watch out for, such as the minimum Node.js version being raised to 18.17 and some API modifications.

Next.js Learn: Your Free Learning Hub
Last but not least, Next.js 14 comes with a refreshed and updated free course on Next.js Learn. From basics to advanced features like Partial Prerendering, it’s a complete resource to level up your Next.js skills.

Next.js by Vercel - The React Framework
Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and…
nextjs.org

Wrapping It Up
And there you have it — the news from the Next.js front!

I hope this quick read has been insightful for you. Feel free to dive into the comments to discuss these fresh updates.

For a more in-depth look at each point, make sure to check out the Next.js team’s official blog post: Next.js 14 Details.

Functions in JavaScript

Yash Kapure — Sat, 16 Dec 2023 06:07:48 +0000

Function

A Function Declaration (defining a function)
A Function Call (calling/executing a function)

Types of Functions in JavaScript

Normal(Regular) Function:

In JavaScript, a regular function is a reusable block of code that performs a specific task. It is defined using the function keyword, followed by a name (optional) and a set of parameters enclosed in parentheses.

//Function Declaration
function functionName(a,b){
  return a+b;
}

// function call
const res = functionName(a,b);
console.log(res);

Anonymous Function:

An anonymous function in JavaScript is a function without a specified name. It is typically defined on the fly and assigned to a variable or used directly as an argument in a function call.

const functionName = function(a,b){
  //Do something
}
const result = functionName(3, 4);
console.log(result);

Immediately Invoked Function Expression (IIFE):

An Immediately Invoked Function Expression (IIFE) is a JavaScript design pattern where a function is defined and executed immediately after its creation. This pattern is often used to create a private scope for variables, preventing them from polluting the global scope.

const result = (function(a,b){
   return a+b; 
  })(2,4);

Arrow Function:

An arrow function in JavaScript is a concise way to write anonymous functions. Arrow functions were introduced in ECMAScript 6 (ES6) and provide a more compact syntax compared to traditional function expressions.

const functionName = (a,b) => {
   // do something
}

Implicit Return:

If the function body consists of a single expression, the return statement is implicit.

const functionName  = (a, b) => a + b;
console.log(functionName(3, 4));

NOTE!: Every function in JavaScript returns undefined unless and until specified.

Please feel free to add more information to the post if you have any.

Coding Contest✨

Yash Kapure — Sat, 26 Nov 2022 16:06:58 +0000

Google Developer Students Club in Collaboration with Newton School✨⚡

Newton School is celebrating 𝟯 𝘆𝗲𝗮𝗿 𝗔𝗻𝗻𝗶𝘃𝗲𝗿𝘀𝗮𝗿𝘆 of our Coding Contest this November, we bring to you 𝗡𝗼𝘁 𝗷𝘂𝘀𝘁 𝗮 𝗿𝗲𝗴𝘂𝗹𝗮𝗿 Coding Contest but,

𝟯𝘅 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴
𝟯𝘅 𝗢𝗽𝗽𝗼𝗿𝘁𝘂𝗻𝗶𝘁𝘆
𝟯𝘅 𝗥𝗲𝘄𝗮𝗿𝗱𝘀

| 𝐏𝐫𝐢𝐳𝐞 𝐌𝐨𝐧𝐞𝐲 & 𝐆𝐢𝐟𝐭 𝐕𝐨𝐮𝐜𝐡𝐞𝐫𝐬 𝐰𝐨𝐫𝐭𝐡- ₹ 90,000/- 💰|
| 𝐅𝐫𝐞𝐞 𝐑𝐞𝐠𝐢𝐬𝐭𝐫𝐚𝐭𝐢𝐨𝐧 |

💡 REGISTER NOW - Strictly use the following Registration Link

Exclusive 𝗙𝗿𝗲𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗳𝗿𝗶𝗲𝗻𝗱𝗹𝘆 Coding Course & Certificates for Participants
Language Used: c/ c++/ Java/ Javascript/ Python.

𝗗𝗮𝘁𝗲 𝗼𝗳 𝗖𝗼𝗻𝘁𝗲𝘀𝘁: 𝟯𝟬𝘁𝗵 𝗡𝗼𝘃𝗲𝗺𝗯𝗲𝗿 𝟮𝟬𝟮𝟮 𝗮𝘁 𝟮𝟭:𝟬𝟬 - 𝟮𝟯:𝟯𝟬
Eligibility- Open to All

❗❗𝗣𝗦: Non-coders can be coding-ready by taking free exclusive online coding courses designed by IIT Alumni💻 and ICPC
finalists.

Comment Below and Let me know if you have registered or not: I have to keep Database updated 😄

Thank You In Advance if you register

And please support this post by sharing with your friends and ask them to register by following the above link!✨🤞

✨Atlas Hackathon22: Space Talks - MERN✨

Yash Kapure — Sat, 12 Nov 2022 17:19:29 +0000

Built Space Talks ✨

This is my 1st hackathon 💯🤞.

Share Your Thoughts, Knowledge and whatever You like or know About Galaxies, Stars, Space, Planets, etc... 🌍✨🌚

Category Submission: MERN Stack

App Link

Live Space Talks

Screenshots

Description

My MERN Project 😄

This Beautiful web App Space Talks I created with React js.
I want you all to share Your knowledge and the facts you know about space.
Feel free to share your knowledge regarding Space, Our Planet Earth, Stars, Moons, Planets.

Steps To follow:

Let The page loading complete
Check What other peoples have posted
If found interesting click on sign-in button and sign-in with google account.
Post something that people don't know regarding space, galaxies, universe, stars, etc.
You can Add Image as well as small gifs

Link to Source Code

Feel free to fork my repo:
Source Code - ClientSide

Source Code - ServerSide

Permissive License

MIT

Deployment

Netlify for front-end hosting
Heroku for back-end hosting

Background

I am always curious to know what all things happen in space some facts about space, some newborn stars, planets, black hole, etc ... So I thought lets create one kind of forum where anyone who loves about space would share his/her knowledge with the world.
And finally, I created this Space Talks.

How I built it

Yes while working with MongoDB Atlas I got to know about how to integrate MongoDB with my react application from making simple react app to creating fully functional MERN Application.

Additional Resources/Info

Google Developers Student Club - MET collaborates with Newton School

Yash Kapure — Mon, 24 Oct 2022 04:45:50 +0000

Hello Everyone do register for this coding contest and give your 100% efforts.

Grand Coding Contest: Google Developer Students Club - MET & Newton School

This Diwali Code To Celebrate! 🪔

| 𝐏𝐫𝐢𝐳𝐞 𝐌𝐨𝐧𝐞𝐲 & 𝐆𝐢𝐟𝐭 𝐕𝐨𝐮𝐜𝐡𝐞𝐫𝐬 𝐰𝐨𝐫𝐭𝐡- ₹ 30,000 | 𝐅𝐫𝐞𝐞 𝐑𝐞𝐠𝐢𝐬𝐭𝐫𝐚𝐭𝐢𝐨𝐧 |💰

💡 REGISTER NOW - STRICTLY USE this Registration Link ❗

Unlock the Free Exclusive Beginner Friendly Courses
Language Used: c / c++ / Java / Javascript / Python
Date of Contest: 27th Oct 2022 (Thursday) at 9:00 pm - 11:30 pm
Eligibility: Open to All

Perks :
Individual Event
1. 1st rank holder will receive Swags
Team Event
1. 1st rank holder team will receive Swags. (NOTE: Every member in team will receive swags)

Join Our Community - Discord

PS: Unique Questions Designed By ICPC Finalist

NOTE!!! : Whoever registers over here will have to comment below that you have registered!

Thank You🧡

Join GDSC-Hacktoberfest

Yash Kapure — Sun, 02 Oct 2022 07:15:59 +0000

GDSC-ProCode

Hello Friends, We have created this repo just for improving your LOGICS in any kind of programming.

We are creating this repo So that many of you can add your files over here.

HACKTOBERFEST - 2022

What is HACKTOBERFEST💻⚡? > HACKTOBERFEST IS DIGITALOCEAN’S ANNUAL EVENT THAT ENCOURAGES PEOPLE TO CONTRIBUTE TO OPEN SOURCE THROUGHOUT OCTOBER.

~ For Contributors:

Here’s what you need to know to participate and complete Hacktoberfest:

1.Register anytime between September 26 and October 31

2.Pull requests can be made in any GITHUB or GITLAB hosted project that’s participating in Hacktoberfest (look for the “hacktoberfest” topic)

3.Project maintainers must accept your pull/merge requests for them to count toward your total

4.Have 4 pull/merge requests accepted between October 1 and October 31 to complete Hacktoberfest

5.The first 40,000 participants (maintainers and contributors) who complete Hacktoberfest can elect to receive one of two prizes: a tree planted in their name , or the Hacktoberfest 2022 t-shirt.
So Lets be the first 40,000 participants!!!⚡💯

Steps to get registered!:

Go to: https://hacktoberfest.com/ and click on registration is open now(Hurry Up!! It can get closed anytime)
Authorize your GitHub account with HactoberFest > click Initiate
Scroll down
- Enter Your Name
- Email
- How will You participate: > select CONTRIBUTOR 🤝
- Experience Level: > select NEWBIE👶
- How would you like to contribute: > select CODE
- Country : INDIA 🇮🇳
- Check Holopin(You will receive a digital batch which you can showcase on your GitHub profile)
- Check All Marketing Options
- Accept All the RULES
- Click REGISTER

We will do this program on our GDSC-Patterns repository

https://github.com/Yashkapure06/GDSC-ProCode

Give a ⭐ so that our repository can get more recognition!

You will have to raise a PR(Pull Request) on which ever new question arises!!
And we will merge your PR's it your code is correct!

Remember You can get Hacktober t-shirt if we come in 1st 40,000 participants. So I want All of you to take advantage of it!!!

Take it seriously!!
Let's Make our MET to get more recognition! from all over the WORLD!

But Wait!! Which files!? and how to give names to those files which you are going to upload

We are going to play with patterns here!⭐🎉🥳

So Follow these steps:

First of all you guys will have to fork this repo
Next You will see This:
This is what you will see next:
Now, Go to respective day's directory:
You'll see a Problem Statement Pattern
File Name Format : firstName_lastName.(extention)
After this when you add any kind of files in this repo you will see like this:
As in above Image you are seeing Test.js But in real You will have to create a fileName like yourname_lastName.(extention) your code can be in any language
And When you commit the code you will just have to commit: "PatternName Created by YourName"
Next You have to click on Contribute option and open pull request
After opening pull request add proper title and description of what you are adding in that file and after that click on Open Pull Request:
After you click on Open Pull Request, you will find our Main GDSC-Patterns repo with one issue created in it like this:

Your code must be working, and if your code is found correct your code will get merged and if you do so your profile will get added in contributers list! So I hope a lot of energy and Amazing logics from all of you guys.

Building Netflix Clone in React

Yash Kapure — Thu, 18 Aug 2022 04:08:59 +0000

I tried To build Netflix clone Using ReactJS. Please Rate it so that I can improve :) Thank You.

⭐ Contributions are welcomed!

Live

Note:
- I have used TMDB Api.

github

Give a ⭐ if you like it :)

How to add Comments section for free on your website?

Yash Kapure — Sun, 17 Jul 2022 18:39:44 +0000

We always want to add comments for our Blog, Personal Portfolio, Some Official websites or etc... But instead of creating a backend Database, We here have a very easy and simple way to add comments section on any kind of website for free, with following some conditions.

So, Lets begin...

Let's What exactly utterances is?

Ans: A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

Open source. 🙌
No tracking, no ads, always free. 📡🚫
No lock-in. All data stored in GitHub issues. 🔓
Styled with Primer, the css toolkit that powers GitHub. 💅
Dark theme. 🌘
Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

I will Tell You how to add Utterances on HTML website:




<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

add the following code snippet in your HTML file.
Like this..👇



<html>
   <head>
        <title>Add COMMENT using Utterance</title>
   </head>
   <body>


   <script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
  </script>
  </body>
</html>

Here are some parameters like
1.src
2.repo
3.issue
4.theme
5.crossorigin
6.async

1.src:

Src is by default the Script given by Utterance.

2.repo:

REPO means your G I T H U B repository.

Like: yourgithubusername/repositoryname

So it will look like:

repo = "yourgithubusername/repositoryname"

3.issue:

It is nothing but "The mapping between blog posts and GitHub issues."

4.theme:

It is to give different look and feel of the comment box for the users.

Same as the themes of github.

Here are some options:
* github light
* github dark
* boxy light
* github dark orange
* and many more ...

5.Crossorigin:

It enables cross-origin resource sharing only for this specific method. And which is by default kept "anonymous"

6.async:

It has an asynchronous behaviour so it is by default true.

This is what it all means. In This way we can use Utterance on our static HTML websites.

2.Now Lets See how To use Utterances on our REACT website or web application.

For Reactjs,

      It is also very Simple.

create a new react app:

npm install create-react-app@latest your-app-name

Now, after installing your app, you need to cd into your app like

cd your-app-name

In src folder, create a new file named as comments.js

and paste the following code in your comments.js file.



import React, { Component } from 'react'

export default class Comments extends Component {
    constructor(props) {
        super(props);
        this.commentBox = React.createRef();
    }

    componentDidMount() {
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js")
        scriptEl.setAttribute("crossorigin", "anonymous")
        scriptEl.setAttribute("async", true)
        scriptEl.setAttribute("repo", "yourgithubusername/repositoryname")
        scriptEl.setAttribute("issue-term", "pathname")
        scriptEl.setAttribute("theme", "github-light")
        this.commentBox.current.appendChild(scriptEl)
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} ></div>
            </div>
        )
    }
}

Let's understand the code.

*First of all we are importing React and React.Component i.e, {Component}

*```

constructor(props) {
super(props);


> In React, constructors are mainly used for two purposes: It used for initializing the local state of the component by assigning an object to this. state. It used for binding event handler methods that occur in your component.


* This code is very simple to understand `this.commentBox = 
 React.createRef();` 

> It means, createRef() method is used to access any DOM element in a component and it returns a mutable ref object which will be persisted as long as the component is placed in the DOM.


*componentDidMount() method

> This method allows us to execute the React code when the component is already placed in the DOM (Document Object Model).(Here our DOM element includes`document.createElement("script")` ). This method is called after the component is rendered.

The below lines of code are written in Plain JS. Explanation is
same as I explained all the above points.

In simple words, setAttribute("parentaAttribute","childAttribute")
eg `scriptEl.setAttribute("src", "https://utteranc.es/client.js")`

scriptEl.setAttribute("src", "https://utteranc.es/client.js")
scriptEl.setAttribute("crossorigin", "anonymous")
scriptEl.setAttribute("async", true)
scriptEl.setAttribute("repo", "yourgithubusername/repositoryname")
scriptEl.setAttribute("issue-term", "pathname")
scriptEl.setAttribute("theme", "github-light")


After completing these steps.

You need to finally, import This file (Comments.js) in any of your file location.


![Add anywhere you want to add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwurfxv01qa58ue4h0jw.png)


After doing all these steps.

`npm start` to start yout react application.

And Finally you get  your comment box. You will just need to sign in with your github account to add comment. And You can give reactions with the help of emojis. Like 👇

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br61ryp4xy6unie1xlvb.png)


This is what you will get as an output.

![Utterance Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7uvxb79vb93alb7oga0.png)



[UTTERANCE OFFICIAL WEBSITE](https://utteranc.es/)

How to create a Blogging Website with Express, NodeJs and MongoDB

Yash Kapure — Wed, 08 Jun 2022 05:14:21 +0000

Hello Developers,

Fork My github Repo And Give a Star

If You want to make any awesome changes do fork and push in the repo.

1st you have to Fork the project
Use your git Bash and

git clone <url of repo>

Next, You have to install all the necessary packages. So for that, just type 👇 and press enter

npm install

If you want to understand the code Open your favourite Code editor. I have explained each and every function in detailed manner in comment.
To run the project You just have to write the following command

nodemon server.js

Server.js Contains

process.env.CONNECTION_URL

This CONNECTION_URL contains the mongoDB Localhost url you can find it in mongoDB compass

For the above CONNECTION_URL You need to create a **.env** file and Add the following CONNECTION_URL=localhosturl (*NOTE❗: Do not use single or double quotes for adding url *)

I have created a Blogging Website with Node Js as backend, express and mongoDB as a database.
This Blogging Website performs CRUD operations.

Here You will just have to click on New Post to create a new Post from scratch.

Here You will get redirected to the new post page.

Here you can see the created post. You can further delete or edit this post.
This is MongoDB Compass Where you can see the data stored

Thank You For giving your Time

How to improve logics in programming? help...

Yash Kapure — Wed, 16 Mar 2022 03:40:17 +0000

Can You all please help in how to improve logics in programming

Space Talks - ReactJs

Yash Kapure — Tue, 08 Mar 2022 04:18:59 +0000

Space Talks ✨

My #MERN Project 😄

This Beautiful web App Space Talks I created with React js.
I want you all to share Your knowledge and the facts you know about space.

Steps To follow:

Let The page loading complete
Check What other peoples have posted
If found interesting click on sign-in button and sign-in with google account.
Post something that people don't know regarding space, galaxies, universe, stars, etc.
You can Add Image as well as small gifs

Thank You ❤♾

How to Add Google Analytics And Google AdSense To your Next JS Project!

Yash Kapure — Fri, 24 Dec 2021 12:50:17 +0000

First create your next js app using `npm create-next-app app-name`

Then go to

go to github icon and go to examples
in examples go to with-google-analytics
Check Here
here you go when you click on above link

Go Back to Your Code editor create a new folder named lib

Created? Well Done!
Now,
create a new file named as gtag.js

and paste the following code over in gtag.js

Copy this Code

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

like this

Now, How to get TrackingID?
Just go to your
Google Analytics
go to the settings icon which means admin

in that you will see

Go and click on create Property
1.

2.

Fill the required details such as website name and if you have your live website paste the link in the required section.

After that it will bring you to

Note: This Tracking ID is just for testing purpose You will find your Tracking Id on the same page

Copy Your Tracking ID and paste it

Now go to pages folder in the github docs

Copy all this code to_app.js

import { useEffect } from 'react'
import Script from 'next/script'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

const App = ({ Component, pageProps }) => {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default App

Last Step is to go to _document.js file where actual tracking will take place
If you don't find _document.js file. Then just go to pages folder and create a new file named as _document.js.
And add the following code over in the file.
This is for google analytics.

 <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}></script>
<script
                dangerouslySetInnerHTML={{
                  __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${process.env.GA_TRACKING_ID}', {
                  page_path: window.location.pathname,
                });
              `,
                }}
            />

To add google adsense we just have to add 1 line.
for that follow the same steps create an account in google adsense
and get the script like this

 <script data-ad-client="ca-pub-xxxxx(yourid)" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Final code will be in _document.js file You can refer the main docs of NEXTJs Custom Doc

<Head>
 <script data-ad-client="ca-pub-xxxxx(yourid)" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>
//##############
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}></script>
<script
                dangerouslySetInnerHTML={{
                  __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${process.env.GA_TRACKING_ID}', {
                  page_path: window.location.pathname,
                });
              `,
                }}
            />
</Head>

Remember the whole code should be inside <Head></Head> Tag

Hope this might help you.
Thanks for giving Your time to read this post!