why Next.js is the best choice for create a blog site or even using it with wordpress ? 🤔😉

Mohamed Atef — Wed, 21 Sep 2022 19:36:08 +0000

We are now seeing the huge number of blogging sites, whether on your own application or on sites ready for blogs such as WordPress, Blogger and others
_Of course, one of them is me 😀 😀

Now what distinguishes sites from each other is not only the quality of the content, but the ease, speed, efficiency and responsiveness
Here we have Next.js

First let me define Next.js:

Next.js is a JavaScript framework created by** Zeit**. It allows you to create server-side rendering and static web applications using React. It's a great tool for building your next website. It has many great features and advantages, which can make Nextjs your first choice for building your next web application.

Next.js comes with a bunch of cool features like server-side rendering, routers, and slow loading.

Server-side rendering:
Next.js performs server-side rendering by default. This makes your application optimized for search engines. You can also integrate any middleware like express.js or Hapi.js, and you can run any database like MongoDB or MySQL.

Next.js comes with a header component that allows you to add and create dynamic meta tags.
These make your website able to be indexed by search engines like Google.

Create a static website with Next.js
In addition to server-side rendering, you can still compile and export your app as an HTML static website and publish it to a static hosting website like a GitHub page or netlify.

routers
This is another great feature of Next.js. When using the create-reaction-app, you usually need to install the interactive router and create its own custom configuration.

lazy loading
Slow loading makes your app offer a better user experience. Sometimes it may take a while for the page to load. The user may abandon your app if it takes more than 30 seconds to load.

The way to avoid this is to use some trick to indicate to the user that the page is loading, for example by displaying a turntable. Lazy loading or code splitting is one feature that allows you to handle and control lazy loading so that you only load the necessary code on your page.

Conclusion :

These features make next.js the best choice to start blogging and profit from it in the best possible way

Building a blog with Next.js is today's top choice for those who want a simple yet powerful blog - without ending up with a lot of code and while increasing our SEO rankings.

SEO (Search Engine Optimization) is the process of optimizing your app to rank better on search engines. It is very important for any blog that wants to rank better on search engines and bring in more traffic. A good app with poor SEO rankings will not be productive, effective, or successful.

Simple Validation Form In React Using UseHooks And LocalStorage With Some Tailwind🥳🎉

Mohamed Atef — Wed, 10 Aug 2022 20:43:36 +0000

Hello Everyone Who Came to My Blog, I Really Appreciate that and hope i could to help you to create simple Validation Register Form.🙏🙏

I Don't Want To Write Long Blog , So Let's Dive into the code . 👨‍💻 👩‍💻

First Let's Write Simple jsx code:

<div
      className="login grid place-content-center  
    bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
    >
      <form
        className="card grid place-content-center  h-96 w-96  
       "
        onSubmit={handleSubmit}
      >
        <label htmlFor="">name:</label>
        <input
          type="text"
          value={name}
          placeholder="Enter Your Name"
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name}

        <label htmlFor="email">Email:</label>
        <input
          type="email"
          placeholder="email address"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email}

        <label htmlFor="password">Password:</label>
        <input
          type="text"
          placeholder="password"
          value={password}
          id="password"
          onChange={(e) => setPassword(e.target.value)}
        />
        {errors.password}

        <label htmlFor="phoneNumber">phone Number:</label>
        <input
          type="text"
          value={phoneNumber}
          placeholder="phone Number"
          id="phoneNumber"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="buttons flex gap-3 justify-center mt-5">
          <button type="submit" className="btn-1">
            Sign Up
          </button>
          <button>
            <Link
              className="
        "
              to="/login"
            >
             Login{" "}
            </Link>
          </button>
        </div>
      </form>
    </div>

2- Second It's Time to Make this form Dynamic :
We Need First To Initiate the UseState Hooks that we use

 const [email, setEmail] = useState("")
         const [password, setPassword] = useState("")
         const [name, setName] = useState("")
         const [phoneNumber, setPhoneNumber] = useState("")
         const [errors, setErrors] = useState({})

Prepare the Submit Button As Like that

const handleSubmit = (e) => {
    e.preventDefault()
    formValidation()
    setUsers([...users, { email: email, password: password }])
  }

And Now It's Time To Hit Some Conditions for the Right Register

 const formValidation = () => {
    let newErrors = {}
    if (name === "") {
      newErrors.name = <h1 className="text-red-800 text-center">
        Name Can't Be Blanck</h1>
    }
    if (email === "") {span
      newErrors.email = <span className="text-red-800 text-center">
         Email Address Is Required</span>
    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
      newErrors.email = <span className="text-red-800 text-center">
        Email address is invalid</span>
    } else {
      newErrors.email = <h1 className="text-green-800 text-center ">
        Email is Valid</h1>
    }
    if (password === "") {
      newErrors.password = <span className="text-red-800 text-center">
        Password Is Required</span>
    } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
      newErrors.password = <span className="text-red-800 text-center">
        Invalid Password Format</span>
    } else {
      newErrors.password = <span className="text-green-800 text-center ">
        Correct Password</span>
    }
    setErrors(newErrors)
  }

> And The Final Step is Saving the user's data in localstorage in this way:

We can initiate the localstorage

const [users, setUsers] = useState(() => {
    const data = localStorage.getItem("data")
    return data ? JSON.parse(data) : []
  })

And Using UseHooks to Watch if there is not a user in localstorage before to set a new one

useEffect(() => {
    localStorage.setItem("data", JSON.stringify(users))
  }, [users])

👉 Visit my github account

> Conclusion: