DEV Community: Daniel Medina

My Experience with Next.js

Daniel Medina — Mon, 02 Aug 2021 15:30:16 +0000

My Experience with Next.js

What is Next.js?

Next.js is a full-stack React framework that allows for both static site generation and server side rendering. It also allows for a new rendering strategy called Incremental Static Regeneration.

It has a very big variety of features. Not only rendering strategies but also components such as the Head or Image components. You also get the power of API Routes which are routes where you can use server side code to do a variety of tasks, for example connect to a database or handle authentication.

Overall Next.js is by far the best Javascript framework if you want the biggest variety of features while maintaining a blazing fast site.

My experience

I have been using Next.js for about 6 months now and I can confidently say that it does everything it promises to do, and it does it well. Do you want to have a server side rendered page for SEO? Next.js's Head component can handle that. Do you want to serve optimised images for better performance? Next.js's Image component can do that. Do you want to connect to a database and expose an endpoint without having to build and deploy a full backend? Next.js's API Routes will do that for you. Do you need to navigate through pages without refreshing? Next router can do that.

Next really has all the features you will need and if you ever need anything not included, you can use any React package from NPM. Next has its own powers plus the community's.

Ease of Use

I was blown away at how it is extremely easy to get started with Next.js, just yarn create next-app or npx create-next-app and you now have a fully functional Next.js app ready to start creating your application, and if you want typescript then just add the --typescript flag to the command. It's really that easy. You're ready to create your pages.

Speaking about routing and creating pages, I love how every file in the pages directory becomes it's own page. No need for react-router or any external package. Just create a new file with the .js or .tsx extension depending if you use typescript or not and boom! your page is now created.

Developer Experience

The developer experience with Next.js is actually really good. You can easily use Next if you know React. It is like a step up from a typical Create React App. Writing code with Next is a relatively good experience. There are no complex setup processes or other tedious tasks to be able to deploy your application. Next.js is also good at the developer experience because the file structure of your project is easy to understand. No need to search for files all over. Pages are in the /pages directory and components in the /components. It's that easy. Changed your mind and want to use typescript? Just create a .tsx file and Next will automatically setup the typescript configuration.

Benefits of Next.js I've Seen

Next.js facilitates a ton of aspects of developing a performant website. In my experience this has given me the ability to build my projects really quickly while maintaining a fast website. This is something many developers look for: the ability to develop quickly while not compromising the site's performance, and since Next accomplishes all of this, many developers and even enterprise companies such as Github or Netflix are switching to Next.

Deployment

Deploying a Next.js project is extremely easy. Just push your code to a Git repository and deploy with a hosting platform such as Vercel, a hosting platform made by the creators of Next specifically for Next.js. You can also run it in any Node.js server or even a Docker container.

My personal recommendation is Vercel because of how well it integrates with. It gives you analytics in the performance of your application, Incremental Static Regeneration, built in API Route support, and many more features. If you use Next.js you should probably deploy your appl to Vercel.

Final Conclusion

Overall, I really like Next.js. It has been my go-to framework for any new project. It will surely stay that way for a very long time. It just has everything I need:

Huge amounts of libraries and plugins
Server-side rendering and static site generation
Ease of use
React based
Easy deployment process
Large amount of built in features
API Routes Etc...

I hope you enjoyed reading about Next.js with me and I hope you try Next sometime soon. Thank you for reading my post! I appreciate it a lot :)

My Experience With FreeCodeCamp

Daniel Medina — Wed, 09 Jun 2021 16:02:12 +0000

A year ago I joined freeCodeCamp and since I've now gotten 4 certifications, I thought I'd share my personal experience and thoughts about it.

What is freeCodeCamp?

FreeCodeCamp is a free online platform for learning all sorts of topics from Web Development to Machine Learning. Check it out here.

My experience

My first FreeCodeCamp course was te Responsive Web Design Certification. I found the learning method very interesting. I find this learning method really good because you actually get a hands-on experience with what you're learning. This way I learned a lot about core web technologies such as HTML, CSS, and Javascript.

Something I like a lot about freeCodeCamp is that you have the flexibility to create your own schedule and practice whenever you want and are able to. There is no penalty for spending a little more time in something.

I have completed the Responsive Web Design, Javascript Algorithms and Data Structures, Frontend Libraries, and APIs and Microservices Certifications. So I can say I've experienced quite a bit of the freeCodeCamp platform. For the most part I have nothing but positive feedback. I have recommended this several people who have asked me for help in starting their own career in webdev. One of them is now very experienced and has moved onto React.

Suggestions

As much as there is good in this platform, there are some things that could be improved.

1. Improve Redux section.

I struggled the most in the React-Redux section of the Front-end libraries certification because of explanations that i felt assumed previous knowledge of Redux. I felt they went a little too fast.

Conclusion

Overall, I consider freeCodeCamp as one of the best platforms to start your web developer journey. It has clear, concise, and fast-paced explanations that are guaranteed to bump up your skills.

Thanks for reading my article and make sure to keep in touch for more upcoming articles.

Making A Really Simple Redis API with Node.js

Daniel Medina — Mon, 16 Nov 2020 16:12:35 +0000

Introduction

Before I sart I would like to mention that this is my first post here at DEV so I'm excited about that. Thank you for reading my post.

About a week ago I discovered Redis, a simple key-value database that claimed to be the fastest in the world. This claim comes from the fact that it stores the data in memory instead of disk.

Being a fan of NodeJs and all JavaScript related stuff, the first thing I did was look for a NodeJs driver for Redis. Then I found Node Redis which was actually recommended in the official Redis website. I spent some time experimenting with it and eventually settled in making a simple API that could save and get items.

Now I will show you how to make one of your own.

*You can find the finished code in my github at this link *

Prerequisites

Before getting into the code you should get your Redis database in the cloud. They have an option for a free database for unlimited time.

You should also have NodeJs installed with NPM.

Download here

The Tutorial

We'll start by installing the dependencies:

npm install dotenv redis express

Then setting up the .env file with the host, port, and password. You can find this in your Redis dashboard.

.env file

REDIS_HOST=hostname
REDIS_PORT=port
REDIS_AUTH=password

After that I created the index.js file and imported all the dependencies.

index.js

require('dotenv').config();
const express = require('express');
const redis = require('redis');

Next I created the Express app, the Redis client and set the port where the app would be listening.

index.js

const app = express();
const client = redis.createClient({
    port: process.env.REDIS_PORT,
    host: process.env.REDIS_HOST,
});

const port = process.env.PORT || 5050;

client.auth(process.env.REDIS_AUTH, (err, response) => {
    if (err) throw err;
})

Now we can start using Express to handle the API calls with the Redis client. What I did was set a GET route for the root URL. This route will list all endpoints in the API.

index.js

app.get('/', (req, res) => {
    res.status(200).send({
        message: "Looks like you've hit the root url",
        availableurls: [
            "/write/:key/:value",
            "/read/:key"
        ],   
    })
});

Then we will make another GET route to read from the database. The URL will have a parameter of which key to read from the database.

index.js

app.get('/read/:key', (req, res) => {
    client.get(req.params.key, (err, reply) => {
        res.status(200).send({
            data: reply
        });
    });
});

Now we just need to make our api be able to write to our database. Similar to our read function, write will take URL parameters. In this case both key and value.

index.js

app.get('/write/:key/:value', (req, res) => {
    client.set(req.params.key, req.params.value);
    res.status(200).send({
        status: 'OK'
    });
});

Just for fun I will add a 404 route with a fun message. Feel free to sktip this step if you want. Note: the 404 route should go below all other routes.

index.js

app.get('*', function(req, res){
    res.status(400).send({
        message: "what???",
        status: 404
    });
});

For our last step we just need to make our app listen in the specified port and we're done!

index.js

app.listen(port, () => {
    console.log(`App successfully started on http://localhost:${port}`);
});

Conclusion

We now have a working API that can both read and write to a Redis database in the cloud! Isn't that amazing? As mentioned before you can find the full code in my github repo.

Thank you very much for reading this post, it really means a lot for me. If you have any feedback, suggestions, or any comment really, feel free to let me know.

Daniel