In this tutorial, you will learn how to plan and architect a website powered by NextJs. NextJs is a hybrid web framework that uses ReactJs. Like any good framework, NextJs will allow you as a website implementor to build really cool web applications without some of the hassles that you will bump into when using ReactJs standalone from scratch. NextJs is a framework aimed at making developer lives easier. NextJs comes pre-configured with lots of useful features which will prevent you from having to manually set up stuff. Some NextJs specific tools include a built-in router, a link component, an image component, and the ability to use CSS modules out-of-the-box. NextJS also comes with a command to build your web pages as static HTML 💥🏗️🏢
NextJs can be used to build JAMStack based web applications. Using a framework like NextJS, means you can focus on building the websites pages and the components. When it comes to building a NextJs website optimally, you might need to take a slightly different path compared to a normal ReactJs application. In this guide, I will share some helpful tips that will make you a NextJs pro 🔥🔥🔥
Below lists some tips and recommendations that I have learnt from the last three years of building production-ready NextJs websites for clients. These tips are my personal recommendations on how I think you should tackle a NextJs project in the most efficient way possible. If you have ever worked on a CMS-based project, planning a NextJs project will likely feel very familiar. The first step towards designing a NextJs is to go through your web design and determine what page types the site will need.
Determine the page types and the data fetching patterns required
When building a new website you will usually have a design and a content map that will list all of the content pages required on the site. For each page in the design and the content map, you will need to map each page to a NextJS page type. Mapping a page to a page-type is not the only task. In NextJS, you will also need to to think about the page content and determine how frequently that data will change.
Data that changes very infrequently can be rendered as static content. Rendering content as static HTML will ensure the page will load extremely quickly. For example, a blog posts content will not update very often so this should type of content can be statically rendered. This type of data should be fetched using the NextJS method, getStaticProps(). When the web page is being built on the server and converted to a static HTML page, getStaticProps() will be called before the process is finished in order to get any props required by the page. Any props returned by this method will be available before the page is converted to static HTML. An example of how to structure getStaticProps() is shown below:
Any data that needs to be retrieved in real-time (or near real-time) like product quantity in stock, stock price, etc... should be read dynamically. This data can be pulled in using React Hooks or any normal client-side data retrieval method. A hook will be called after the static page has been rendered. For best practice, I suggest sticking with hooks! Using getStaticProps() to render your web pages as static HTML will mean that you will no longer need to worry about SSR anymore, saving you time. The page title, metadata tags and the main page content should all be retrieved using getStaticProps() so that your content can be searchable by search engines, give you some amazing SEO mojo 🤩🤩🤩
Routing
NextJs comes with an in-built router that can be used to minimise the amount of code you need to write. Making sure you understand how NextJs routing works will mean you will not need to violate the DRY principle of development. Dynamic routing should be used to avoid creating unneeded page types. Creating a dynamic route means that conditional logic can be applied to a URL to map a request to a page, meaning that a single page type can be used for multiple pages. NextJs supports four types of routing:
Explicit: A NextJs page, maps directly to a URL. The name of the file maps to the URL used to access it. Explicit routing is good for one-off pages. This approach is not good for pages that are created in a CMS. Exploit pages are easier to debug but less flexible.
Dynamic routes are created by adding [] within the filename of a page. Ther are three types:
Single: A single match will work on an exact URL segment, you would create a single using this filename syntax /blog/[slug].js
Catch-all: This will match on all paths within a location. Using this technique would mean a 404 would not be thrown as any page request within the blog segment will be sent to that page type. You would create a catch-all route using this syntax in a pages files name /blog/[...slug].js.
Optional catch all: This is similar to the above, the difference is that a request to the main URL will also be matched, so both requests to blog and blog/postpone. This option can be good if you are using a CMS to get the content. If you created a NextJs page with optional catching within the application route, any CMS content created within a headless CMS will render on the site. No development effort will be required if the content team want to build new sections. The trade-off with this is flexibility. As the whole application would only have a single point of entry, less control can be used when fetching data. This approach can be useful for very simple brochureware sites. To create an optional catch-all route by including the parameter in double brackets, for example /blog/[[...slug]].js
When thinking about these routing options, it is not an all or nothing. Using folders within your NextJs page will allow you to use a combination of techniques. I tend to only use optional catch-all routes in sub-folders rather than on the application root!
Know Your Instance Counts
For each type of page, you should also determine how many instances of that page will be created with that type within the website. One of the issues with building static websites is the time it takes to generate the HTML. When the server is building the site, if you have thousands of pages, you might be waiting a long time. Having developers sat around waiting for builds is boring and costly. This is why it is important to figure out if the page will be a one-off, or used hundreds, or thousands of times? Knowing how many pages is important as it will determine if you need to use any pagers with dynamic routing parameters. If you have more than 10 pages of the same type, it is best practice to use dynamic route parameters.
Recently, Netlify introduced an on-demand page building feature. This reduces the amount of build time, as pages are dynamically built only when needed. If you have thousands of pages and your builds are taking too long, you should use this feature. Using this pattern, in getStaticPath() you only render any essential pages. This should be a small subset of key pages and definitely not the entire page catalogue. If you don't have any key pages no worries! Next, in the GetStaticPath props, set the fallback parameter to blocking:
Folder And File Structure
When building a NextJs application, consciously think about how you structure your files and folders. You can structure your files and folders however you want, however, a lot of people advocate following the atomic design pattern. In this guide, I will skip the pros and cons about all the different approaches, however, I have linked to two great resources that will give you a more in-depth overview of two popular patterns:
[NextJs project structure]h(ttps://wityan.medium.com/next-js-project-structure-1531610bed71)
Use the NextJS tools effectively
Out-of-the-box NextJs comes with a lot of tools, get to know them and use them. Below lists some components you need to know about:
next/image: Use this to wrap all images to ensure your pages have optimzed images
next/dynamic: If you have large components, use this to lazy load them. For really big components, this will massively improve page performance
next/link: Use this component to prevent full page refreshes which will
That covers the main considerations you will need to think aobut when buliding a website using NextJs. I hope this has added vlaure to your life! Happy Coding 🤘
