If you have just started development with Express.js i suggest you to read my another article about Expressjs — Getting Started & Basic Routing
There is a built in middleware in Express.js enables to serve static files with a certain path and options. As you can see below you can use the express.static
Express is a Node.js framework for server side web applications. Express built on Node.js features to provide easy and fast web & mobile server solutions. It is open source framework and maintain by Node.js community. There are many another libraries built on Express and many big tech companies are using Express in their backend services. Check it out which companies are using Express in their official page.
On GitHub Express repository has 52.3k stars and 8.8k forks. You can check it out from their official Express repository.
After you initialized your npm package.json you can install as below. …
Fonts are very important assets in web development. Let’s see how we can use custom fonts or self hosted fonts in Next.js.
If you have already created your application in Next.js you can continue reading otherwise I would suggest you to read my another post about how to start development in Next.js
You can choose any font as you wish for your projects but i will choose Open Sans for the tutorial.
You can download open sans from google fonts or choose another font as you wish.
To be able to support all the browsers we need to convert our…
If you are part of development Git is one of the most important tools you can use for development. There are many use cases for the github. You can contribute any open source project you would like to and learn coding with reading the codes of many successful developers.
If you are working with the team using git is inevitable for every developer. Learning github commands and memorizing them might be challenging at the beginning but it will come with time :)
Git clone is one of the most important command.
When you want to clone one of the projects…
When you create new web applications probably you would use SVG’s in your project. SVG’s are really important in web development.
You can have a look to my another post to see the importance of SVG usage and some useful SVG sources i use on my daily life.
There are few options to use svg’s in your nextjs application you can choose which one suits best for you and start using that technique!
1 - SVG components
Using SVG components is one of the simplest and affective one for me, because it works with React, Nextjs and Preact so basically…
Tailwind CSS is becaming very popular and it is very developer friendly utility-first CSS framework. If you haven’t used tailwindCSS before you can start looking their documentation.
Create your nextjs application first
npx create-next-app tailwind-demo
After you create your nextjs application we changed directory to the project
Setup required node modules for tailwind
yarn add tailwindcss yarn add -D postcss postcss-preset-env
After successfully installed required packages now we can create required configuration files.
There are 2 configuration files we need to add our project.
Tailwind configurations will be created after running this command as below.
This tutorial will show how to integrate TypeScript to your Nextjs applications. For this purpose we should install required typescript libraries for our Nextjs project.
If you are starting a new project and start with Typescript you can also create a new nextjs application in a seconds with
npx create-next-app your-app-name
// with Npm
npm install -D typescript @types/react @types/node// with Yarn
yarn add — dev typescript @types/react @types/node
Inside the root folder to be able to use TypeScript tsconfig.json needs to be added.
As you can see in the include array we defined some file endings.
Social media cards are really important for your business. Here are meta tags that can show your website much better when it shared.
If you don’t have the required meta tags it would be only a simple text. There are very small changes you can make to show your links with images, descriptions and other contents together to provide much better sharing experience.
As you can see below if Apple does not have the required meta tags it would look like on the left side. Plain simple text.
After you complete this tutorial your links would be on the right…
React helmet is very powerful library to manage head element of your pages. That is really easy to use and manage document elements. React helmet can be useable for many things most importantly one of the most popular one is SEO for react single page applications.
It is very important for server side rendering applications also. If you want to build multi purpose single page application and change the head elements more often React helmet would be very handy library you would like to use.
There are more information about library from React helmet github page
Basically React helmet takes…