What’s NEXT?

Poster for Next.js

Diving into your Project:

The Vercel team has done an outstanding job making the project setup extremely simple. All you need to do is run the following command on the CLI to set up a new Next.js project.

npx create-next-app@latest

Additional Tools:

Apart from the basic setup, you might want to install SASS for styling, Prettier for code formatting, and SWR which is a great tool for fetching and caching data. If you do use SWR, you might not even need global state management like Redux.

File Structure:

By default, you’ll have pages, public and styles directories. The public directory can be used to just host static files like robots.txt. You should create a src directory and move the pages and styles directories inside that. Next.js uses the pages or src/pages path to build the project. Each JS or TS file inside pages is considered to be a page on the application.

api - API related functions & variables
components - Commonly reusable components
config - Commonly used configurations & constants
contexts - Commonly Reusable contexts
hocs - Commonly reusable HOCs
hooks - Commonly reusable hooks
pages - Pages & global files like _app or _document
styles - Global styling & variables
types - All the custom type definitions
utils - Commonly used utility functions
views - A view for each page, components inside subdirectories

Optimisations:

There is a huge scope for optimising your application when you use Next.js and all of them are provided by the Next.js framework itself.

Images:

Next.js provides a next/image library which provides us with a custom Image component that can be used to display images in an optimised way. It adds lazy-loading to the images by default, it provides a way to load size optimised images with Media Delivery Services like Imgix or Cloudinary, blurred image placeholder, image file caching, etc.

Scripts:

Next.js provides a next/script library which provides us with a custom Script component that can be used to load external scripts in an easy and configurable way. You can set a strategy to tell Next.js how & when the script shall be loaded. It is pretty useful when integrating analytics tools.

Data Fetching:

There are various build-in data fetching methods that can be used to optimise your pages.

  • getStaticProps: This method can be used on static pages that may use data from an API. It is called at the time of the build, it generates the static HTML file for the page and serves that file on each request without any processing. It can also be used for Incremental Static Regeneration (ISR) in which you can set a revalidate time limit for the page to be regenerated after a certain amount of time.
  • getStaticPaths: This method can be used if you want to use getStaticProps on dynamic pages. It will also be called on build time, you need to return a list of queries that can be used by getStaticProps to generate static versions of the dynamic page for each of the queries.

Conclusion:

SSR & CSR have their own pros and cons but Next.js really bridges the gap between these 2 technologies. This does not mean Next.js is the only way to go when developing an application, you’ll have to wager your requirements in order to get the best possible solution.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store