DEV Community: Hunter Trammell👨🏼‍💻

The Beginners Guide to Building Production-ready Apps with Next.js Part One The What, How, and Why of Next.js

Hunter Trammell👨🏼‍💻 — Sun, 22 Aug 2021 04:38:57 +0000

Over the last week, I have been a happy citizen in the wonderful world of Next.js. I have always defaulted to Vue.js when building applications. React is great but I never really identified with it in the same way as Vue. My goodness was I mistaken, learning how to use Next.js made me seriously evaluate my current framework preferences. I recently needed to dive into Next.js to complete a project and this requirement as a result forced me to discover my new favorite framework. Honestly as glad as I am to have spent this time with Next.js, I have a feeling a new portfolio site is in my future 😅. It's that much fun!

In the first entry of The Beginners Guide to Building Production-ready Apps with Next.js series, we will first explore Next.js by taking a look at what it is, how it works, and why we should consider using it.

What is Next.js?

Next.js is a React framework that provides several utilities and optimizations so that you can build your project in a production-ready environment. One enhancement that Next.js provides is its file-based routing system. When building a standard React app you may run into issues with scalability when it comes to large websites - for example, when building a SPA you will need to import the React Router library, your page might look something like this:

<Switch>
  <Route exact path="/">
    <!--Homepage-->
  </Route>
  <Route path="/about">
    <!--About-->
  </Route>
  ...
</Switch>

As your application grows, that switch statement is going to have more children than Chuck's on free arcade night. Imagine having a site with 100's of pages, eventually, the structure and modular design that brought you to use a JavaScript framework might be undermined by large and potentially hard-to-maintain files.

There is a lot more to Next.js than just routing, but its overall scalability is, in my opinion, a solid choice when comparing it with standard React routing. Next.js offers a production-ready solution to routing and several other optimizations that will allow you to build an app with little to no configuration and you are left to focus on building a product in a pre-configured development environment. To better understand what it is, let's take a look at how it works and what it can do.

How does Next.js work?

By leveraging Node.js, we can generate static files for serving via a CDN or by keeping our server environment running to handle the server-side generation of files and data via an integrated API. There are many ways to build an app with Next.js so depending on what method you choose to build your app, that will determine Next.js' exact role.

Key features

As noted earlier, Next.js comes with several pre-configured optimizations to help you scale production-ready applications quickly. Let's take a look at some of the powerful features Next.js brings to the table.

React

As you would expect, Next.js apps are built with React! If you want to use a React-specific utility such as Fragments or Portals, you would just import them as you would when building a standard React application.

import {Fragment} 'react' 
import ReactDOM from 'react-dom'

With Next.js you are still building a React application - you just have a ton of performance and architectural optimizations straight out of the gate.

Routing

Next.js provides an alternate way of handling page route definitions. Next.js utilizes file-based routing, meaning that all files placed in the

pages

directory will be automatically evaluated as a route based on their filename/path. Folders would be treated as nested routes, using the name of the folder for the URL parameter and index.js as the default file if the route directly matches the parameter. Dynamic content can also be rendered using

[ square-brackets ]

to help fetch and display dynamic content.

/pages <-- Next.js base directory for all pages, uses index.js as the default file
  about.js <-- /about
  /blog <-- Folders allow for nested routes, using index.js as the default file
    archive.js <- /blog/archive
    index.js <- /blog
    [slug].js <- /blog/10-programming-tips-senior-developers-dont-want-you-to-know
  contact.js <- /contact
  index.js <-- /

As with React Router, Next.js also comes with components and functions to assist with prefetching, rendering, and page routing.

Rendering/Generating Files

When it comes to rendering, Next.js comes with several options that allow you the freedom to choose the best possible method for your data - and what is even better is that you don't need to choose only one method! If your homepage does not contain a lot of dynamic data, you might want to have it pre-rendered into static HTML at build time, while your product page may benefit from being rendered on request so that the client has the most up to date information (at the time of loading). Let's take a look at some of the methods available:

Static Generation

Static generation involves building out static (no action required by the browser to render) HTML files when you run the build command. These files can then be served without needing to perform any server-side code. Since data is pre-rendered into the HTML file your assets can be cached and delivered much faster than dynamic files built when requested by the client. When using React or other SPA's you often will run into issues with SEO as the page is built in the client's web browser. When SEO-crawlers look at these apps, they will most often just find an empty page with no data. By statically rendering your site's HTML files before your end-user receives them, you get the SEO benefits of pre-rendered content with the power of using React. Using the

getStaticProps()

function in your page file, you can specify what data to load into your application during build time. You are then able to return an object you can pass directly into your page function as a prop.

function Home(props){

  const {data} = props

  return (
    <section>
      <h1>API Fun!</h1>
      <ul>
        {data.map(item => <li key={item.id}>{item.title}</li>)}
      </ul>
    </section>
  )
}

export async function getStaticProps() {

  const response = await fetch('YOUR API ROUTE')
  const data = await res.json()

  return {
    props: {
      data
    },
  }
}

export default Home

*Note that when using this with a dynamic file route you will need to add a second function


 to assist with path generation. More information on this function can be found in [Next.js docs](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)!*

#### Server-side Rendering

Unlike static generation, where files are built and stored during the build process and all users share 1 version of a file, [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering) happens during a page request. When a user visits a server-side rendered page, the server builds that page and then returns it to the client. This happens for each request, pages are created specifically for the client that requested. Proper SEO will still be achievable as the HTML is still being generated before the client receives any files. Getting started with server-side rendering is fairly similar to static file generation, just call

 ```getServerSideProps()```

 in your page file and you will be able to access the data that is fetched via props. Server-side generation is best suited for pages that have dynamic content or information that would need to be current at the time of loading. Check out the [Next.js docs](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) for more information on how you can utilize

 ```getServerSideProps()```

 to render your pages.

#### Incremental Static Regeneration

Generating static files is the preferred method as it allows users to interact with your site quicker while achieving better SEO, it still requires the entire site to be rebuilt every time data changes. This is where Incremental Static Regeneration and Client-side rendering come in. By inserting the

 ``` revalidate ```

 property into the object that is returned using our

 ```getStaticProps()```

 function, we essentially give our rendered files and expiration date. If a user requests a file that is older than the time allocated with

 ```revalidate```

, Next.js will rebuild that asset.



```js
return {
  props: {
    fetchedData
  },
  revalidate: 1800 // 30 minutes
}

It is important to note that once the rebuild is triggered, the regenerated asset will only be served after the build is complete. The client will need to manually refresh once the new asset is available to get the latest version of the site. For more information on Incremental Static Regeneration and methods for implementing, more information can be found in the Next.js docs

Client Side Rendering

When dealing with pages that handle user-specific data or a page that does not need to consider SEO, data can be fetched on the client-side using standard React hooks or SWR - a React hook built by the Next.js team that provides a really solid and comprehensive way of fetching and persisting data from the client.

Link

As with React Router, we have a similar

<Link />

component available for use to handle internal page routing and prefetching. There are several attributes you can add to the Link component to achieve the functionality you are looking for. When passing a path to the component, you can include the full path as a string or pass an object that contains the properties of the URL to be built by Next.js. More information on this component and how to use it is available as always via the Next.js docs.

<ul>
  <li>
    <Link href="/">
      <a>Home</a>
    </Link>
  </li>
  <li>
    <Link
      href={{
        pathname: '/blog/[year]/[slug]',
        query: { 
          year: '2021',
          slug: 'my-post'
        },
      }}>
        <a>Blog</a>
    </Link>
  </li>
</ul>

Image

Images are important as they can be an essential aspect of the overall design. However, when used without any optimizations they can easily become a fault point, slowing down your site. Imagine running through a build, meticulously planning how you are going to render your pages only to have your performance cut short by large or oversized images. When you utilize the

<Image />

component, your images are optimized during the build process and served alongside your static files. File paths are source agnostic, so regardless of if the image originates on your local install or from a URL, all images will be optimized and configured based on the parameters set in the component. If you are interested in asset optimization I highly recommend checking out the Next.js Image docs as there are a ton of properties available to give you top-notch images and asset delivery.

Head

Metadata is essential to achieving a good SEO ranking for your site. Using the

<Head />

component as a wrapper for your meta tags, you can easily add dynamic data into your site's


. Since you may want to have certain data that is set globally, default data, or page-specific data Next.js will automatically merge your tags and for any data that might be duplicated, it will default to the lowest instance (i.e. page meta would override global app meta). See the [Next.js docs](https://nextjs.org/docs/api-reference/next/head) for additional information on configuring your sites

 ```<Head />```

 component.

### FullStack Friendly

Another feature worth noting in Next.js is its ability to handle [serving API endpoints from your project](https://nextjs.org/docs/api-routes/introduction). Getting started with an API is pretty straightforward, you need to create an

 ```api```

 folder in your pages directory then define the routes of the API just as you would when defining new pages. Since Next.js runs on Node, you can interface with databases securely without delivering server-specific files to the client. One caveat to the API system in Next.js is that if you are only serving static files - meaning that you are just deploying the build folder rather than keeping your server running, your API will not work as it requires a live server to handle requests. 

### Deployment

If it didn't have enough great things about it already, the team that built and maintains Next.js also built a hosting platform called [Vercel](https://vercel.com/solutions/nextjs). Apps can easily be deployed to Vercel with minimal configuration. You can of course also deploy to other platforms such as [Netlify](https://www.netlify.com/) and [Heroku](https://www.heroku.com/).

## Why you should consider Next.js

Next.js comes with a whole suite of features and optimizations that help you build production-ready apps. The different methods available give you a lot of freedom to define how you want your app to function. The ability to seamlessly build a full-stack application helps bridge the divide between front-end and back-end into a single optimized codebase. There is a good reason large web apps like [Twitch and Hulu are built with Next.js](https://nextjs.org/showcase). If you haven't gotten around to using Next.js I hope this article has helped you reconsider.

## Conclusion

My experience developing with Next.js has been overwhelmingly positive. Now that you have seen all the wonderful things Next.js brings to the table, I think it's time to build. In the next entries in this series, we will explore the many amazing features Next.js has to offer by building a real application. If you are as excited about Next.js as I was after learning what it could do, you should 100% play around with it before starting the next part in this series. There is so much more that I didn't cover, again I am going to link to the [Next.js docs](https://nextjs.org/docs/getting-started) so that you can give them a read (notice a trend here?). 

—-

If you found this article interesting I would love to hear from you in the comments or feel free to reach out on [Twitter](https://twitter.com/trammellwebdev), my DM's are always open! I will update this post as new sections are released so be sure to follow me on [Hashnode](https://blog.huntertrammell.dev/) to stay up to date with my latest posts.

Cheers 🍻

Getting Started With Serverless Functions on Netlify

Hunter Trammell👨🏼‍💻 — Sun, 22 Aug 2021 04:32:12 +0000

Have you ever listened to a new song and it was the only thing that played in your head for days on end? Well, get ready because Netlify Serverless Funcitons are going to be executing in your brain rent-free for the foreseeable future. They 👏 Are 👏 So 👏 Dope!

What is a serverless function?

A serverless function is a chunk of code that can be executed on demand and does not require a server to be running 24/7. This is helpful as it helps you scale your application since you are only utilizing the computing processes that your application needs versus a fixed amount you would get with a traditional server installation.

Running serverless functions is especially helpful for - you guessed it - serverless websites or sites that use a headless approach. Since these functions are only executed on demand and don't have a persisted state they can be useful as a bridge between API's or even passing some of the heavier computed tasks that your application might rely on so that your client is only using the data it needs to run your application.

How much configuration are we talking about?

If there is one thing Netlify excels at (and let's be honest they excel at everything) it is their intuitive UI. I remember when I first discovered Netlify and was completely blown away by how things just worked. Granted that is an application-specific statement, but for someone who previously had always seemed to run into trouble deploying their React/Vue apps for it to work on the first try was pure magic. Netlify Serverless Functions are no exception. Let's build a simple function that interfaces with the Rick & Morty API and returns a subset of data to our application for our users to view based on a search query.

Build and deploy a serverless function

Before we begin, let's go ahead and install Netlify CLI.

/* Install Netlify CLI */
npm install netlify-cli -g

/* Check if installed */
netlify -v

Once the installation is completed, go ahead and create an empty project using this repo as a template. Our app starts with a simple search form. Once the form is submitted we record the value and log it to the console. We also have a div ready to hold our search results.

    <!-- Let's search -->
    <form id="searchForm">
        <label for="query">Search</label>
        <input type="text" id="query">
        <input type="submit" value="Submit"/>
    </form>
    <div id="results">
        <!-- Results will display here -->
    </div>
    <script>
        // Wait for the page to load
        document.addEventListener('DOMContentLoaded', () => {
            // Register elements
            const form = document.getElementById('searchForm');
            const displayDiv = document.getElementById('results');
            const query = document.getElementById('query')
            // On submit record value and output to the console
            form.addEventListener('submit', e => {
                e.preventDefault();
                // Grab search query
                let search = query.value.trim();
                console.log('search')
            })
        })
    </script>

Now we get to the fun part 😊! There are several ways to initiate a project with Netlify, but since we already installed Netlify CLI, we are going to take advantage of that. In your projects directory, go ahead and run the following command. This will set the project up to be deployed on Netlify and also give us access to a local dev server that we can use to test out our functions before pushing them live.

netlify init

This command will open up a tab for you to log into netlify to connect your account. After you sign in, click Authorize and return to the app. You should now see a set of prompts to initialize the application.

Create & configure a new site
Select your team
Choose a nickname for the project

Once these steps are completed you will need to authorize your GitHub account. Go ahead and follow the steps and return to the prompt after GitHub has been connected and you are prompted to head back to the CLI

Leave the build command blank, we don't need this here
Directory can be blank since we are serving the HTML page at the root of our project
Netlify functions folder: netlify/functions
Type Y as we want the netlify.toml file to communicate our settings to Netlify to make deployments pain free

Finally, our CLI steps are complete and we are ready to begin creating our first serverless function! As we notated in the CLI prompts our functions will be placed inside of the directory


. Go ahead and create these folders and create a new file titled

 ```rick_and_morty.js```

 that will contain our serverless functions.

*Note that Netlify will automatically add a hidden folder to your project after the init is finished called

 ```.netlify```

, the folder you are creating needs to be completely separate. This is just for your local dev server*

Inside the

 ```rick_and_morty.js```

 file we will need to set up a few things that are required for this to work properly.

// Our serverless functions are exported via this handler
// the event parameter will hold our query data
exports.handler = async function(event){

// This is what is returned to our client
return {
    statusCode: 200,
    body: JSON.stringify({
        // our data
    })
}

}




This is the basic structure that we need to get the function to return our data when fetched. If you are familiar with HTTP requests, the status code and body should look pretty familiar, but that is just the format we need to put things into so we can get the data from point A to point B. The status code tells our client that the request was successful and the body contains our data.

Now that we have our function scaffolded, let's fetch data from our API. Before we do that we need to run

 ```npm init -y```

 then

 ``` npm i node-fetch```

 in our terminal as

 ```fetch```

 is a client function and Netlify uses a Node server to run these scripts.

const fetch = require('node-fetch')
// Our serverless functions are exported via this handler
// the event parameter will hold our query data
exports.handler = async function(event){
// Get value of search parameter from the event
const {query} = JSON.parse(event.body)
// Build our query URL
const URL = https://rickandmortyapi.com/api/character/?name=${query}

// Fetch our data
const response = await fetch(URL)
const data = await response.json()

console.log(data)
// This is what is returned to our client
return {
    statusCode: 200,
    // By setting the data to data.results, we eliminate the need for our client app to do this
    body: JSON.stringify({
        data: data.results
    })
}

}




Because we are acting as a bridge between the client and the API, we can simplify the data so that we are only pulling in what we need. If we only needed a few properties from our response object, we could create our own custom object and map those values so that our client data is minified.

Now on the front end, all we need to do is hit that API endpoint

 ```/.netlify/functions/rick_and_morty```

 so that we can render the data.

<!-- Let's search -->
<form id="searchForm">
    <label for="query">Search</label>
    <input type="text" id="query">
    <input type="submit" value="Submit"/>
</form>
<div id="results">
    <!-- Results will display here -->
</div>
<script>
    // Wait for the page to load
    document.addEventListener('DOMContentLoaded', () => {
        // Register elements
        const form = document.getElementById('searchForm');
        const displayDiv = document.getElementById('results');
        const query = document.getElementById('query')
        // On submit record value and output to the console
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            // Grab search query
            let search = query.value.trim();
            // Fetch API data
            const {data} = await fetch('/.netlify/functions/rick_and_morty',{
                // This is how we send data to our export.handler function
                method: 'POST',
                body: JSON.stringify({
                    query: search
                })
            }).then(res => res.json())

            // Map through our API response and append to our display div
            let results = data.map(result => {
                let p = document.createElement('p');
                p.textContent = `${result.name} - ${result.species}`;
                return p
            })
            displayDiv.append(...results)

        })
    })
</script>




After searching you should see the search results appended to the display div. Now, we pulled in more data than we needed and the styling/functionality could use some work, but the point of this article is more geared towards getting you comfortable with using serverless functions on Netlify. 

## Conclusion

That's it! After you push your repo to GitHub your serverless function will deploy on Netlify and you will be able to access the serverless function in production! If you enjoyed this and want more, why not challenge yourself and see how you can filter the API response before sending it to the client or even add some fun styles to the website 🚀

Here are a few great resources that you can utilize to learn more about how to implement these functions in your apps:

-  [Netlify Docs](https://docs.netlify.com/functions/overview/) 
-  [JAMStack Explorers](https://explorers.netlify.com/missions) 
-  [Netlify Functions for an Unrivaled Serverless Workflow](https://www.netlify.com/blog/2021/02/18/netlify-functions-for-an-unrivaled-serverless-workflow/) 

---

- [Completed Repo](https://github.com/huntertrammell/serverless-functions-demo/tree/final_app)
- [Live Demo](https://serene-booth-22b996.netlify.app/)
- [Support Rick & Morty API ❤](https://rickandmortyapi.com/help-us)

If you enjoyed this article or have any questions feel free to reach out on Twitter [@trammellwebdev](https://twitter.com/trammellwebdev) or in the comments below!

Cheers 🍻

5 reasons why you should use Codewell for your next portfolio project

Hunter Trammell👨🏼‍💻 — Sun, 22 Aug 2021 04:29:09 +0000

Your portfolio is a powerful tool that can give you a leg up when it comes to looking for a job. Employers don't care if you can talk the talk; they want to know if you can code the code. Imagine your portfolio contains several projects, but most of them are from tutorials or school. With that in mind, it is safe to assume that several other developers took the same tutorials and courses and may have a similar array of projects in their portfolios. Let me preface by acknowledging that there is absolutely nothing wrong with following tutorials; I've done them, I still do them, and I have no intentions of stopping. Your portfolio will stand out by having more independent projects than ones where the code potentially could have been copied into your repo. That is where our problem begins: Tutorial Hell. It's hard to build projects for your portfolio that aren't from a tutorial for many reasons:

Your ideas are more complex than your current set of skills.
Not everyone is good with graphic design.
You honestly don't know where to start.

Tutorial Hell refers to the state of being a developer when you feel as if you need to rely on tutorials to build something. You may be a strong developer, but getting started is tough. When things work, you can connect the dots without issue but have trouble setting the dots up themselves. Now we look at our solution: Codewell.
Codewell offers free and paid project templates, meaning that they don't provide architectural direction or code but rather a set of mockups and assets you can use to see what to build. You have the freedom to develop the site using the stack that you are most comfortable with while still being challenged. Here are five reasons why you should use Codewell for your next portfolio project:

Real-world application: When you get a job as a developer, you are assigned a project and provided direction, but the code itself is mostly in your control (granted, you might still need to keep it within the boundaries of your employer's stack). When building using a design template, you have no choice but to write the code yourself, giving you valuable real-world experience.
It's challenging: Working through problems yourself is the most valuable thing you can do when working on your skills. There is a wide range of templates, all with varying degrees of difficulty so that you are comfortable with what you are doing. You are also a metric on how challenging can be; why not spend a bit after you complete the build and resolve issues from a lighthouse audit? Is your website inclusive, or could you make a few changes so that everyone can enjoy your website regardless of how they use it?
These websites look sharp: Not every developer has an eye for artistic design, and that is perfectly okay hence why you are a developer and not a designer. Speaking from personal experience, while I put my best foot forward and wrote some dope code, the design sometimes doesn't do my site any justice. With some of the applications I've built I am hesitant to show clients or employers because they will likely look at the live page before inspecting the code - and clients will likely never look at the code. Now imagine handing an employer or a client a website built on the Snipper template . cha-ching!
No source code: As I wrote about earlier, you have complete control over what stack you use. If you are trying to get a job as a WordPress developer, build a theme using that design. Every website you develop for your portfolio doesn't need to solve a problem; that's what you do when you get a job. Give your potential clients and employers the confidence that you can solve their problems.
Experience: When you run through the wilds of VS Code and build something on your own, you are growing with every function, method, or property you write. Practice makes perfect, and to practice is to simply; write code. There is no magic wand that will get you out of Tutorial Hell, but there is a way out. Remember that being a developer is not about how much knowledge you persist, but rather how much you persist knowledge itself.

Starting a project on your own can be difficult. If you do get stuck, there is a community slack and even a submission board where other developers can share their solutions. If you are up to the challenge, I highly suggest choosing Codewell for your next portfolio project. I recently built a version of the Snipper challenge using Vue.js. I didn't feel pressured to finish the site before a deadline. I could take my time and work out the best way to implement the design and the app itself. Whether you are building your portfolio to get a job or just coding for fun, the challenges on Codewell will make a great addition to your project list and help you stand out above the rest.