DEV Community: Pierre

Hosting providers to deploy your Next.js app

Pierre — Mon, 09 Jan 2023 18:59:18 +0000

Vercel

Vercel is a hosting platform developed by the creators of Next.js. It is an excellent choice for those looking to use the latest features of Next.js with ease. As the creators of Next.js, Vercel is able to provide excellent support for the framework and ensure that users can take advantage of all the latest updates and capabilities.

Render

Render offers a variety of features and tools to assist developers in building, deploying, and managing their apps. Some of these features include free TLS certificates, a global CDN, DDoS protection, private networks, and automatic Git deploys.

Netlify

If you are looking to deploy a static site with Next.js, Netlify is a strong option to consider. It provides a number of tools for managing and optimizing your site, including A/B testing, form handling, and analytics.
Netlify has developed its own Next.js middleware that allows for HTML rewrites, page data transforms, and access to the response body.

Digital Ocean

Digital Ocean App Platform is a fully-managed solution for quickly building, deploying, and scaling apps. It allows you to easily deploy code from your GitHub or GitLab repositories and automatically updates your app whenever you push changes to your source code.

Heroku

Heroku offers a variety of features and tools that make it easy to deploy, run, and scale Next.js applications. These features include support for automatic scaling, easy rollbacks, and access to a wide range of add-on services. This makes Heroku a powerful platform for developing and running Next.js apps.

AWS Amplify

AWS Amplify is a service that allows you to build and deploy cloud-based web applications. It is a part of the Amazon Web Services (AWS) suite of products and provides easy integration with other AWS services, such as Amazon Cognito for user authentication and Amazon S3 for file storage.

Google Cloud App Engine

Google Cloud App Engine is a platform that automatically scales your application based on traffic and demand, and provides load balancing to distribute traffic across multiple instances of your app. It is also integrated with other Google Cloud Platform (GCP) services, such as Cloud Storage, BigQuery, and Cloud Functions, allowing you to easily build and deploy cloud-based applications.

I'm Pierre the maker of NextJS Devs a reverse job board for Next.js developers
If you're looking for a Next.js job don't hesitate to create a profile!

Simple guide to Web Scraping with NodeJS

Pierre — Thu, 14 Oct 2021 17:00:51 +0000

With one of my projects ( rocketcrew.space A job board dedicated to the space industry ), I have to collect job offers on career pages of different companies. Every site is different, but each one can be scraped with one of three methods.

1 - Look for an API

The first thing you have to look at when you want to scrape a website is the network tab of the browser dev tools.
Press F12 and go to the "Network" tab. You will be able to see every request that the site is making.
If you're lucky, you can spot an API call that the website is using to get its content information, like job offers for a career page.
So all you have to do is to use the same API request to get the website content. You can use the Axios library for example.

2 - Server Side Rendered websites

Some websites are SSR, short for Server Side Rendered. It means that all the HTML page is generated on the backend. So what we want to scrape can be found directly in the HTML, we just have to parse it.

To do this you can use Axios to get the HTML page, and Cheerio to parse it.
Cheerio allows you to parse the HTML with the same syntax as jQuery.

Here is a simple example.

const response = await axios.get(`https://website-url.com`);

const $ = cheerio.load(response.data);
const description = $('#description').html();

3 - Client-Side Rendered websites

The last type of site you can encounter is a SPA ( Single Page Application ). In that case, the server only sends a basic HTML file and the rest of the site is generated with Javascript, client-side.
In that case, we cannot use the previous method because the GET request would only return a basic HTML file without its content.
So to scrape this kind of site, we have to simulate a browser in the backend to allow Javascript to generate the website content.
With NodeJS, we can use Puppeteer, which will allow us to create, and control a Chrome browser.

Here is a little example to get a page h1 text.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://website-url.com");

const pageTitle = await page.evaluate(() => document.querySelector("h1").textContent);

await browser.close();

Let me know if you have any questions!

Follow me on Twitter If you want to learn how I am building RocketCrew!
https://twitter.com/siglavesc2

A curated list of buttons and box-shadows for your next project!

Pierre — Wed, 30 Jun 2021 14:46:24 +0000

Hello!

Here is my latest little project to help you find inspiration for your next button and box-shadow design. I also include a link to some design systems.
https://copy-paste-css.com/

Let me know if you are aware of some interesting button designs that I could include on the site!