There are a number of ways we can address this situation. It would be the best optimization if we could apply techniques that can reduce the amount of latency to perform read/write operations on the database. One of the most popular ways to optimize our API calls is by implementing Caching mechanism.

What is Caching?

Caching is the process of storing copies of files in a cache, or temporary storage location so that they can be accessed more quickly. Technically, a cache is any temporary storage location for copies of files or data, but the term is often used in reference to Internet technologies.

By Cloudflare.com

The most common example of caching we can see is the browser cache, which stores frequently accessed website resources locally so that it does not have to retrieve them over the network each time they are needed. Caching can boost the performance bottleneck of our web applications. When mostly dealing with heavy network traffic and large API calls optimization this technique can be one of the best options for our performance optimization.

Redis: Caching in Server-side

When we talk about caching in servers, one of the top pioneers of caching built-in databases is Redis. Redis (for REmote DIctionary Server) is an open-source NoSQL in-memory key-value data store. One of the best things about Redis is that we can persist data in a database that can continuously store them unless we delete or flush it manually. It is an in-memory database, its data access operations are faster than any other disk-based database, which eventually makes Redis the best choice for caching.

Redis can also be used as a primary database if needed. With the help of Redis, we can call to access and reaccessed as many times as needed without running the database query again. Depending on the Redis cache setup, this can stay in memory for a few hours, a few minutes, or longer. We even can set an expiration time for our caching which we will implement in our demo application.

Redis is able to handle huge amounts of data in real-time, making use of its in-memory data storage capabilities to help support highly responsive database constructs. Caching with Redis allows for fewer database accesses, which helps to reduce the amount of traffic and instances required even achieving a sub-millisecond of latency.

We will implement Redis in our Next application and see the performance gain we can achieve.

Let’s dive into it.

Initializing our Project

Before we begin I assume you have Node installed on your machine so that you can follow along with the steps involved. We will use Next for our project because it helps us write front-end and back-end logic with no configuration needed. We will create a starter project with the following command:

$ npx create-next-app@latest --typescript

After the command, give the project the desired name. After everything is done and the project is made for us we can add the dependencies we need to work on in this demo application.

$ npm i ioredis @chakra-ui/core @emotion/core @emotion/styled emotion-theming
$ npm i --save-dev @types/node @types/ioredis

The command above is all the dependencies we will deal with in this project. We will be making the use of ioredis to communicate with our Redis database and style things up with ChakraUI.

As we are using typescript for our project. We will also need to install the typescript version of the node and ioredis which we did in the second command as our local dev dependencies.

Setting up Redis with Upstash

We definitely need to connect our application with Redis. You can use Redis locally and connect to it from your application or use a Redis cloud instance. For this project demo, we will be using Upstash Redis.

Upstash is a serverless database for Redis, with servers/instances, you pay per hour or a fixed price. With Serverless, you pay per request. This means we are not charged when the database is not in use. Upstash configures and manages the database for you.

Head on to Upstash official website and start with an easy free plan. For our demo purpose, we don’t need to pay. Visit the Upstash console after creating your new account and create a new Redis serverless database with Upstash.

You can find the example of the connection string used ioredis in the Upstash dashboard. Copy the blue overlay URL. We will use this connection string to connect to the serverless Redis instance provided in with free tire by Upstash.

import Redis from "ioredis";
export const redisConnect = new Redis(process.env.REDIS_URL);

In the snippet above we connected our app with the database. We can now use our Redis server instance provided by Upstash inside or our App.

Populating static data

The application we are building might not be an exact use case but, we actually want to see the implementation of caching performance Redis can make to our Application and know how it’s done.

Here we are making a Pokemon application where users can select a list of Pokemon and choose to see the details of Pokemon. We will implement caching to the visited Pokemon. In other words, if users visit the same Pokemon twice they will receive the cached result.

Let’s populate some data inside of our Pokemon options.

export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch(
    'https://pokeapi.co/api/v2/pokemon?limit=200&offset=200'
  );
  const { results }: GetPokemonResults = await res.json();

  return {
    props: {
      pokemons: results,
    },
  };
};

We are making a call to our endpoint to fetch all the names of Pokemon. The GetStaticProps help us to fetch data at build time. The getStaticProps()function gives props needed for the component Home to render the pages that are generated at build time, not at runtime, and are static.

const Home: NextPage<{ pokemons: Pokemons[] }> = ({ pokemons }) => {
  const [selectedPokemon, setSelectedPokemon] = useState<string>('');
  const toast = useToast();
  const router = useRouter();

  const handelSelect = (e: any) => {
    setSelectedPokemon(e.target.value);
  };

  const searchPokemon = () => {
    if (selectedPokemon === '')
      return toast({
        title: 'No pokemon selected',
        description: 'You need to select a pokemon to search.',
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    router.push(`/details/${selectedPokemon}`);
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Box my="10">
          <FormControl>
              <Select
                id="country"
                placeholder={
                  selectedPokemon ? selectedPokemon : 'Select a pokemon'
                }
                onChange={handelSelect}
              >
                {pokemons.map((pokemon, index) => {
                  return <option key={index}>{pokemon.name}</option>;
                })}
              </Select>
              <Button
                colorScheme="teal"
                size="md"
                ml="3"
                onClick={searchPokemon}
              >
                Search
              </Button>
          </FormControl>
        </Box>
      </main>
    </div>
  );
};

We have successfully populated some static data inside our dropdown to select some Pokemon. Let’s implement a page redirect to a dynamic route when we select a Pokemon name and click the search button.

Adding dynamic page

Creating a dynamic page inside of Next is simple as it has a folder structure provided, which we can leverage to add our dynamic Routes. Let’s create a detailed page for our Pokemon.

const PokemonDetail: NextPage<{ info: PokemonDetailResults }> = ({ info }) => {
  return (
    <div>
      // map our data here
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.query;
  const name = id as string;
  const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
  const response: PokemonDetailResults = await data.json();

  return {
    props: {
      info: response,
    },
  };
};

We made the use of getServerSideProps we are making the use of Server-Side-Rendering provided by Next which will help us to pre-render the page on each request using the data returned by getServerSideProps. This comes in handy when we want to fetch data that changes often and have the page updated to show the most current data. After receiving data we are mapping it over to display it on the screen.

Until now we really have not implemented caching mechanism into our project. Each time the user visits the page we are hitting the API endpoint and sending them back the data they requested for. Let’s move ahead and implement caching into our application.

Caching data

To implement caching in the first place we want to read our Redis database. As discussed Redis stores its data as key-value pairs. We will find whether the key is stored in Redis or not and feed the client with the respective data needed. For this to achieve we will create a function that reads Redis for the key client is requesting.

export const fetchCache = async <T>(key: string, fetchData: () => Promise<T>) => {
    const cachedData = await getKey(key);
    if (cachedData)return cachedData
    return setValue(key, fetchData);
}

When we will know the client is requesting data they have not visited yet we will provide them a copy of data from the server and also behind the scene make a copy inside our Redis database. So, that we can serve data fast through Redis in the next request.

We will write a function where it takes in a parameter of key and if the key exists in the database it will return us parsed value to the client.

const getKey = async <T>(key: string): Promise<T | null> => {
    const result = await redisConnect.get(key);
    if (result) return JSON.parse(result);
    return null;
}

We also need a function where it takes in a key and set the new values alongside with the keys inside our database only if we don’t have that key stored inside of Redis.

const setValue = async <T>(key: string, fetchData: () => Promise<T>): Promise<T> => {
    const setValue = await fetchData();
    await redisConnect.set(key, JSON.stringify(setValue));
    return setValue;
}

Until now we have written everything we need to implement Caching. We will just need is to invoke the function in our dynamic pages. Inside of our [id].tsx we will make a minor tweak where we can invoke an API call only if we don’t have the requested key in Redis.

For this to happen we will need to pass a function as a prop to our fetchCache function.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.query;
  const name = id as string;

  const fetchData = async () => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
    const response: PokemonDetailResults = await data.json();
    return response;
  };

  const cachedData = await fetchCache(name, fetchData);

  return {
    props: {
      info: cachedData,
    },
  };
};

We added some tweaks to our code we wrote before. We imported and made the use of fetchCache functions inside of the dynamic page. This function will take in function as a prop and do the checking for key respectively.

Adding expiry

The expiration policy employed by a cache is another factor that helps determine how long a cached item is retained. The expiration policy is usually assigned to the object when it is added to the cache. This can also be customized according to the type of object that’s being cached. A common strategy involves assigning an absolute time of expiration to each object when it is added to the cache. Once that time passes, the item is removed from the cache accordingly.

Let’s also use the caching expiration feature of Redis in our Application. To implement this we just need to add a parameter to our fetchCache function.

const cachedData = await fetchCache(name, fetchData, 60 * 60 * 24);
  return {
    props: {
      info: cachedData,
    },
  };

export const fetchCache = async (key: string, fetchData: () => Promise<unknown>, expiresIn: number) => {
    const cachedData = await getKey(key);
    if (cachedData) return cachedData
    return setValue(key, fetchData, expiresIn);
}

const setValue = async <T>(key: string, fetchData: () => Promise<T>, expiresIn: number): Promise<T> => {
    const setValue = await fetchData();
    await redisConnect.set(key, JSON.stringify(setValue), "EX", expiresIn);
    return setValue;
}

For each key that is stored in our Redis database, we have added an expiry time of one day. When the set amount of time elapses, Redis will automatically get rid of the object from the cache so that it may be refreshed by calling the API again. This really helps when we want to feed the client with the updated fresh data every time they call an API.

Performance testing

After all of all these efforts we did which is all for our App performance and optimization. Let’s take a look at our application performance.

This might not be a suitable performance testing for small application. But app serving thousands of API calls with big data set can see a big advantage.

I will make use of the perf_hooks module to assist in measuring the time for our Next lambda to complete an invocation. This is not really provided by Next instead it’s imported from Node. With these APIs, you can measure the time it takes individual dependencies to load, how long your app takes to initially start, and even how long individual web service API calls take. This allows you to make more informed decisions on the efficiency of specific code blocks or even algorithms.

import { performance } from "perf_hooks";

const startPerfTimer = (): number => {
    return performance.now();
}

const endPerfTimer = (): number => {
    return performance.now();
}

const calculatePerformance = (startTime: number, endTime: number): void => {
    console.log(`Response took ${endTime - startTime} milliseconds`);
}

This may be overkill, to create a function for a line of code but we basically can reuse this function in our application when needed. We will add these function calls to our application and see the results millisecond(ms) of latency, it can impact our app performance overall.

In the above screenshot, we can see the millisecond of improvements in fetching the response. This can be a small improvement in the small application we have built. But, this may be a huge time and performance boost, especially working with large datasets.

Conclusion

Data-heavy applications do need caching operations to improve the response time and even reduce the cost of data volume and bandwidth. With the help of Redis, we can deduct the expensive operation database operations, third-party API calls, and server to server requests by duplicating a copy of the previous requests in our Redis instance.

There might be some cases, we might need to delegate caching to other applications or microservices or any form of key-value storage system that allows us to store and use when we need it. We chose Redis since it is open source and very popular in the industry. Redis’s other cool features include data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, HyperLogLogs, and many more.

I highly recommend you visit the Redis documentation here to gain a depth understanding of other features provided out of the box. Now we can go forth and use Redis to cache frequently queried data in our applications and gain a considerable performance boost.

Please find the code repository here.

Happy coding!

The post Caching NextJS Apps with Serverless Redis using Upstash appeared first on Flatlogic Blog.

Another requirement that has become widespread in the development of web applications is the speed of work and the speed of loading pages. This creates a perfect opportunity for companies that have decided to trust modern technologies like React.js, or have chosen the way of the Jamstack approach.

In the modern world of web development, what you just can’t find, for example, frameworks for frameworks or the so-called meta frameworks. In this article, we will talk about just such a meta-framework – next js, which is built on without React.

Most of the reason why companies and developers choose Next.js is that it is a full-stack framework (as in, it handles both the frontend and backend of your application) and offers support for a variety of rendering methods — even mixing and matching those methods as needed.

We will find out what Next.js is, why to use it, its disadvantages and advantages, and for the first time, we will write about the best templates for Next.js.

What is Next.js

Next.js is a JavaScript framework that enables you to build superfast and extremely user-friendly static websites, as well as web applications using React. Next.js allows the building of hybrid applications that contain both server-rendered and statically generated pages.

Why use Next.js

Let’s list the main features that make Next.js so popular and why many developers consider it the best library right now.

Different render options out-of-the-box

One of the most important, if not the most important, Next.js features are the different types of rendering that you can do in your application.

By default, Next.js is using Server-Side Rendering (SSR) and at the same time is can be also a great Static Site Generator (SSG).

Next.js provides an out-of-the-box solution for server-side rendering (SSR) of React components. With Next.js, developers can render the JavaScript code on the server and send simple indexable HTML to the user. Before that, this could also be done manually, but it required a lot of work with caching server load, on-demand content, or the architecture of the application itself.

Incremental server-side rendering

Next.js allows you to create or update static pages after the site has been built. Incremental static site regeneration will allow developers and editors to use the static site generation mechanisms applied to individual pages, without having to rebuild the entire site. The use of ISR allows you to maintain the strengths of SSG on a project scale of millions of pages.

Improved Search Engine Optimization

Next.js allows you to build web applications with full functionality and interactivity with SPA without losing the SEO aspect but even adding. With this, developers do not even need to think about how to make an SEO-optimized project, because it will be like this by default (For marketers, they can use a special backlink tracker to improve SEO processes).

Enhanced performance

Next.js frees the browser from loading and working with all the Javascript code at once, thus increasing such a metric as a time to first draw (TTFD). It measures the amount of time needed for the user to see the very first content on their screen and should ideally be below 1 second. This factor will improve both User Experience and SEO.

Part of the React ecosystem

Next.js is part of a large React ecosystem, with all its benefits in the form of several best practitioners, community help, useful libraries, and already solved corner cases. Next.js was also developed specifically for React, so it will be easy for you to embed this framework into your existing application.

Great User Experience

Thanks to Next.js you can build a fully customized user experience. Let’s see what it means.

• Fully customizable – you can customize the look of your application anyhow you need or want. It also allows you to make changes without any limitations.
• Adaptability and responsiveness – sites and applications built on Next.js are responsive out of the box and look good on mobile devices.
• Speed – Next.js websites can be super-fast because they are static so visitors will be more than satisfied with the performance.
• Data security – in the case of Next.js, the data on the site is not directly linked to the site, so it is more difficult for an attacker to get it.

All of the things mentioned above make the user experience as great as it can be.

Developer Experience

It is worth stopping a little here and noting how much the next values development experience. This thread stretches from the very origins of the framework – ease of development and implementation, clear documentation, examples, easy transition to new versions.

Great work with images

Images take up a significant part of the site not only in terms of page size but also in terms of page weight. Since version 10, Next.js can automatically compress all images, a little later the ability to compress them with any library you like was added. Also, the <picture /> component automatically adds width and height attributes. However, even optimized images can spoil the metrics if they are on the first screen. Therefore, Next.js has a built-in placeholder option for images.

Easy to learn for React Developers

If you’ve written any React application at all, you’d find yourself very familiar with Next.js.

Out of the box support for Sass Modules and TypeScript

Next.js has great support for TypeScript out of the box. Recently they also added module-based support for Sass as well. This means that your styles can now be written in Sass, local to your modules, with caching and revalidation – all managed by Next.js internally.

File-system routing

You don’t need to use any third-party libraries to handle and configure routing.

Persistent Caching for Page Bundles

Next.js also supports persistent caches for pages that are not changed.

Internationalized Routing

Next.js has built-in support for internationalized (i18n) routing. It is a feature that automatically sets the language for the user.

Code Splitting

Next.js has the Code splitting feature out of the box. It simply splits the code into separate bundles to make the load faster.

What can you build with Next.js and when to use Next.js

With Next.js you can build several apps and websites like:

• Dashboards;
• Admin panels;
• MVP (Minimum Viable Product);
• Jamstack websites;
• Web Portals;
• Single web pages;
• Static websites;
• SaaS products;
• eCommerce and retail websites;
• Complex and demanding web applications;
• Interactive user interfaces;
• Blog.

What projects are most suitable for Next.js? 

When creating a landing page

Next.js is great for creating landing pages and other marketing tasks.

When SEO Matters

When building e-commerce sites, search engine optimization is more important than ever. With server-side rendering, Next.js excels in this regard as well.

When creating websites

Server-side rendering of the application removes the need for clients to render on their devices. For users of slower devices, this can result in faster boot times.

Pros and Cons of Next.js

Pros

• Steep learning curve because of good and short documentation;
• Built-in support for TypeScript;
• In Next js, the developer can choose which page to render on the server and which to render during the build. This is the most flexible and optimal approach possible in principle;
• Big community;
• Great for SEO;
• Zero Config – next js allows you to focus on the business logic of your application instead of the application logic. And to help you, it provides automatic compilation and bundling; In other words, Next is optimized for production right from the start;
• Fast Refresh – fast, live-editing experience;
• Built-in CSS support – the possibility to import CSS files from a JavaScript file;
• NextJS Provides Routing – NextJS provides a quick and easy way to create APIs in applications. If your application uses third-party APIs, then you often need your API for proxy requests and token storage. Next.js routing is perfect for this.

Cons

• Cost of development – since Next.js does not provide many built-in front pages, you have to create your front-end, which will require changes from time to time. It means that you will have to pay a developer to get the job done;
• Bad integration with state management libraries – so if you need a state manager in your app, you have to add Redux, MobX, or something else;
• The low number of easy to use plugins plug-ins;
• Next js – opinionated framework;
• There is only one way to work with routes in NextJS, and you cannot customize it for yourself. Next.js is limited to its file-based route, and dynamic routes are only possible when using a NodeJS server.

Top Next JS templates

Before we start listing the best templates, we must identify the criteria by which we will describe them:

• Which rendering method is used;
• Next.js version;
• Is Typescript supported;
• Price;
• Is there a live demo?

Ecommerce React Template

Demo: https://flatlogic.com/templates/ecommerce-react-template/demo
Price: From $149 to $699, one-time payment
Typescript: Yes
Rendering methods: Server-Side Rendering
Next.js version: 10.0.6

This template is a fully developed e-commerce store based on Next.js, node js, and react. Product pages and other pages use server-side rendering for SEO purposes.

The template is not free – its cost is $ 149, but for this money, you will get a fully working store, which you will need to fill with goods and place on the hosting.

In the front-end part of our eCommerce template, you will find such features as the product description page, landing page, category pages, all support pages (contact, FAQ, about, etc.), and blog. The back-end part consists of CMS for blog, authentication, CMS for the store with an analytics dashboard, user management, and product management. We have also integrated payment systems into our eCommerce react template.

To start a template you just need to type 2 commands and that is all – you can start to develop your store.

Key Features

• Product listings;
• Product filter;
• Server-side rendering;
• SEO module;
• Blog and CMS for it;
• Registration with email/password/name;
• Stripe integration;
• Node.js & PostgreSQL integrated;
• Sequilize ORM;
• React 16;
• Responsive layout;
• Checkout page.

Tokyo Black NextJS Typescript Dashboard

Demo: https://tokyo-black-nextjs.bloomui.com/
Price: From $49 to $499, one-time payment
Typescript: Yes
Rendering methods: –
Next.js version: –

Tokyo Black NextJS is a classic dashboard template with an admin panel, several report templates, pre-built forms, and tables. The specific thing about this template is that it uses with Next.js Material UI.

The admin dashboard contains examples of fully working management sections complete with search and filter functionality, bulk operations. The forms are written using the Formik library.

Key features

• 6 Layout Blueprints;
• React + Typescript;
• Multiple Dark Colors Schemes;
• Axios API Calls;
• Right-To-Left Layouts;
• 150+ Components.

PickBazar – React Ecommerce Template

Demo: https://pickbazar-react.vercel.app/
Price: From $29 to $1200, one-time payment
Typescript: Yes
Rendering methods: –
Next.js version: 9.5

If you are looking for a template for an e-commerce project, then Pickbazar can be an excellent choice due to the wide use of various technologies besides Next.js and react, such as Nest, GraphQL, and Tailwind. Another advantage of this template is its speed and SEO focus, which are key characteristics for an e-commerce project.

PickBazar also includes internal page layouts, a checkout system, and all these other specialties that will do you well. The design is also clean and minimal, making sure all the items come into view stunningly. There is also REST API integration with React Query for customers who had already a REST-based backend for remote data fetching.

Key Features

• Monorepo;
• Built with Tailwind CSS;
• React Hooks;
• GraphQL;
• Stripe integration.

Crema – React Admin Template

Demo: https://1.envato.market/QOrvjo
Price: From $24 to $900, one-time payment
Typescript: Yes
Rendering methods: –
Next.js version: –

Crema Next.js templates have ten navigation styles, five built-in apps, various color combinations, more than one hundred widgets, and code splitting. With three ready-to-use dashboards, Crema takes care of CRM, crypto, and analytics. Crema can be based on Material UI components or Ant Design. Crema is integrated with Redux and Context API for state management hence making it fast and reliable.

Key Features

• Built-in internationalization;
• RTL support;
• 3 back-end types;
• Authorization Support;
• Material UI or Ant.design for UI purposes;
• Code splitting.

NextJS Material Dashboard PRO

Demo: https://demos.creative-tim.com/nextjs-material-dashboard-pro/admin/dashboard
Price: From $119 to $599, one time payment
Typescript: No
Rendering methods: –
Next.js version: 10.0.5

NextJS Material Dashboard PRO is a premium React and NextJS admin template based on Material UI. The template comes with 7 color filter choices for the links of the Sidebar (blue, green, orange, red, purple, rose, white), 3 filter color choices for the background of the Sidebar (white, blue, black), an option to have a background image on the Sidebar and 6 color filter choices the card headers (blue, green, orange, red, purple, rose).

This template is sharpened more to help you with the UI part since technically there are more advanced products in our selection. But the number of components is also non-flexible.

Nextkit – Nextjs Free UI Kit

Demo: https://next-kit-free.vercel.app/
Price: Free
Typescript: No
Rendering methods: SSG
Next.js version: –

Next Kit React is more like a landing page template. It allows you to create static websites, landing pages, coming soon pages, homepages. The Next Kit is built on Reactstrap, which is a responsive React Framework.

The free version comes with a grid design that helps you play around with the look and feel of the web app the way you want.

Key features

• Created with NextJs react framework with React strap (bootstrap);
• 17+ readymade UI Blocks;
• 25 essential UI elements;
• SCSS Based CSS framework;
• One-level dropdown menus;
• Search Engine Optimized Code.

NextJS Dashboard Theme with Tailwind CSS

Demo: –
Price: From $29 to $79, one-time payment
Typescript: Yes
Rendering methods: –
Next.js version: 12

Indigo NextJS Admin Dashboard Theme is a template for creating a web application dashboard for NextJS, React, and Tailwind CSS. The theme was built on top of the Next.js framework and it uses our open source boilerplate code. You can run the project easily without any configuration.

There are several reusable React components in this template:

• 14+ React Components using Tailwind CSS;
• Data visualization;
• Data tables with pagination;
• Form components;

The download file includes the code source and documentation on how to get started. Implemented in a modular way, you can also customize the theme to meet your specific needs.

Key Features

• Responsive design;
• PostCSS to process Tailwind CSS
• TypeScript typecheck;
• Linter with ESLint (Default NextJS, Next.JS Core Web Vitals, and Airbnb configuration)
• SEO metadata, JSON-LD, and Open Graph tags with Next SEO

You can also use this theme with other React frameworks like Gastby.js or any other boilerplate generator like Create React App. It’s is 100% compatible with any React-based project. However, you need to do some configuration yourself if you don’t want to use our default boilerplate code.

Conclusion

In this article, we examined what the Next.js is, its advantages and disadvantages, and where it is best used. Next js has a rich history, large community, stable growth, and development. The framework has both obvious advantages in the form of different types of rendering, and disadvantages – it is very opinionated.

We found out that Next js is reasonable to use for building small applications of several pages, or for medium-sized applications, with a relatively simple architecture, which seems to be possible to think through completely before you start writing it. A large project will inevitably face problems and bugs that it is not clear how to fix, and in addition, there is a risk that you will have to constantly rewrite the application so that it works normally because the practices set out in the documentation that you start to use will be changed to some new approach.

In order to speed up development on Next.js, you can refer to the templates that we presented in this collection.

The post What is Next.js? Top 7+ Next.js Templates appeared first on Flatlogic Blog.