Easiest way to build your NextJS site

NextJS is a React framework that makes it easy to build websites and apps. Its adoption has been growing rapidly over the years. Check out their impressive showcase of sites built on NextJS.

At Quest, we built our own website using NextJS. In this tutorial, I’ll show you how we built our website in 4 simple steps — starting from our Figma designs and going all the way up to publishing our site with little to no hand coding.

Four simple steps to building your NextJS site

Step 1: Get your Figma designs ready

Create your Figma design just as usual. If you want to create a multi-screen experience — for desktop, tablet, mobile, create the design for one first and then setup variants for the others. Use Auto layout in Figma to make sure your layouts are responsive within each device size.

Multi-screen website design in Figma.

For interactive elements like buttons and links, you can use the MUI component library to set them up. Here’s a doc that describes how to set up your custom components. Here’s a video that describes how to set up your Figma design overall.

Step 2: Export your design to Quest

Export your design using the Quest plugin.

Using the Quest Figma plugin, export your component to Quest. If you have nested components like header, footer, etc., in the page, export them all separately.

Step 3: Setup your state triggers, props and bindings

Open the component in the Quest editor, where you can set up the interactions.

First set up the state triggers for the multi-screen experience. In the screenshot below, the first design variant (for desktop) is the default, so I set up the state triggers for tablet and mobile as shown below. In the generated code, the logic for showing the right variant for the user device screen size is built-in automatically.

Setting up state triggers in Quest for multi-screen experience.

Setup bindings for interactions like button clicks or link clicks as shown in the screenshots below.

Setting up OnClick bindings for buttons.

Setting up link bindings.

Step 4: Push code to your GitHub

Now push the generated code to your GitHub repository.

Push generated component code to your GitHub repo.

You can set up your code repository details in the App Settings tab. You can also select the code export type to either Create React App or NextJS. You can choose your file types to be JS or Typescript as well. You can also push your full app from here in case you have multiple components or pages to build.

App export settings in Quest.

From your GitHub branch you can deploy your site wherever you want. In our case, we use Vercel to deploy our NextJS site. As soon as we push to our Vercel connected GitHub branch, it automatically builds our React App and deploys our live site.

If your designer makes any tweaks or updates to the design of the site, all you have to do is export it to Quest where you generate the code and push it to GitHub. It is as simple as that.

Learn more about Quest and see how you can fast-track your workflow.

Happy building!