Forem: Jake Prins

How to Convert a Next.js Application to React.js

Jake Prins — Mon, 30 Sep 2024 14:32:21 +0000

If you've built a web application using Next.js but now need to convert it to a pure React.js application, you're not alone. Whether it's for simplicity, specific project requirements, or a preference for client-side rendering, converting from Next.js to React can be straightforward with the right guidance. In this article, I'll walk you through the steps to convert a Next.js app to React.js, ensuring a smooth transition while maintaining your application's core functionality.

Note: If you're looking to convert a React.js application to Next.js instead, check out my other article on how to convert React.js to Next.js.

Why Convert Next.js to React.js?

Next.js is a fantastic framework that offers server-side rendering (SSR), static site generation (SSG), and a host of other features out of the box. However, these features might be overkill for smaller projects or unnecessary if you prefer client-side rendering (CSR) with React.js. Converting to React.js can simplify your build process, reduce server dependencies, and give you more control over your application's architecture.

Understanding the Differences

Before diving into the conversion process, it's essential to understand the key differences between Next.js and React.js:

Server-Side Rendering vs. Client-Side Rendering: Next.js supports SSR and SSG, whereas React.js is primarily for CSR.
Routing: Next.js has a built-in file-based routing system. In React.js, you'll need to use a library like React Router.
API Routes: Next.js allows you to create API routes within the same project. In React.js, you'd typically separate the frontend and backend.

Steps to Convert Next.js to React.js

Let's get started with the step-by-step guide on how to convert a Next.js application to React.js.

1. Set Up a New React.js Application

First, create a new React.js project using a tool like Create React App (CRA) or Vite.

Using Create React App:

npx create-react-app my-react-app
cd my-react-app

Using Vite:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Transfer Dependencies

Copy the dependencies and devDependencies from your Next.js project's package.json to the new React.js project's package.json. Run npm install or yarn install to install them.

3. Migrate Components and Pages

Copy the contents of your Next.js components and pages directories into your React.js project's src directory. Since Next.js uses a pages directory for routing, you'll need to adjust this structure.

4. Implement Routing with React Router

Next.js handles routing automatically based on the pages directory. In React.js, you'll need to set up routing manually.

Install React Router:

npm install react-router-dom

Set Up Routes in src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Add other routes */}
      </Routes>
    </Router>
  )
}

export default App

5. Adjust Data Fetching Methods

In Next.js, data fetching is done using getServerSideProps, getStaticProps, or getInitialProps. In React.js, you'll need to handle data fetching within your components, typically using useEffect and useState.

Example:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return <div>{/* Render your data */}</div>
}

export default Home

6. Handle API Routes

If your Next.js app uses API routes within the pages/api directory, you'll need to migrate these to a separate backend service or adjust your frontend to fetch from external APIs.

Options:

Create a Separate Backend: Use Node.js, Express, or any backend framework to set up API endpoints.
Use External APIs: If possible, adjust your frontend to consume external APIs directly.

7. Update Environment Variables

Next.js uses environment variables prefixed with NEXT_PUBLIC_ for client-side variables. In React.js, create a .env file at the root of your project and prefix variables with REACT_APP_.

Example:

REACT_APP_API_URL=https://api.example.com

Access them in your code using process.env.REACT_APP_API_URL.

8. Remove Next.js Specific Configurations

Delete any Next.js specific configurations like next.config.js. Also, remove any Next.js-specific imports or packages that are no longer needed.

9. Test Your Application

Run your React.js application to ensure everything works as expected.

npm start

Go through each route and functionality to verify that the conversion was successful.

Conclusion

Converting a Next.js application to React.js involves setting up a new React project and migrating your components, adjusting routing, and handling data fetching differently. While Next.js offers many powerful features, a pure React.js application provides simplicity and flexibility, especially for projects that don't require server-side rendering.

By following this guide on how to convert Next.js to React.js, you should have a seamless transition.

Thanks for reading! If you're interested in going the other way around, check out my article on how to convert a React.js application to Next.js. For more updates on new projects or articles, follow me on Twitter: @jake_prins.

How to create a ChatGPT application using Next.js and the OpenAI API.

Jake Prins — Thu, 06 Apr 2023 07:06:02 +0000

Build a ChatGPT application with Next.js, TypeScript, and TailwindCSS.

Prerequisites

Node.js and npm installed on your machine
A basic understanding of React and TypeScript
An OpenAI API key — you can sign up for an account and generate an API key from the OpenAI website.

What we will build

Following this tutorial, we will use the OpenAI API to create a simple chat application like ChatGPT.

Step 1: Setting up the project

We will use the Next.js Starter Kit from Apideck to set up our project. It comes with TypeScript, TailwindCSS, and the Apideck Components library pre-installed.

Create a new project using the command line:

yarn create-next-app --example https://github.com/apideck-io/next-starter-kit

Choose your project name and navigate to your new folder. Inside, create a .env.local file at the root of your project and add the following line (replacing YOUR_OPENAI_API_KEY with your actual key):

OPENAI_API_KEY=YOUR_OPENAI_API_KEY

Step 2: Writing the API client

To not expose your OpenAI API key, we will create an API endpoint instead of making requests to the API directly from our browser. Follow these steps to set up your endpoint using a Next.js API route:

Locate the pages folder of your project and create a new subfolder named api.
Inside the apifolder, create a new TypeScript file named createMessage.ts
In the createMessage.ts file, we can either use the OpenAI SDK or issue an HTTP request to the OpenAI API to generate a new message for our “conversation” with the AI. We will use the direct API call in this tutorial.

Here is the code for our API route.

import { NextApiRequest, NextApiResponse } from 'next'

export default async function createMessage(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { messages } = req.body
  const apiKey = process.env.OPENAI_API_KEY
  const url = 'https://api.openai.com/v1/chat/completions'

  const body = JSON.stringify({
    messages,
    model: 'gpt-3.5-turbo',
    stream: false,
  })

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${apiKey}`,
      },
      body,
    })
    const data = await response.json()
    res.status(200).json({ data })
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
}

For this example, we’re utilizing the gpt-3.5-turbo model, as it’s currently available at the time of writing. If you possess access to GPT-4, you can alter the value as necessary.

The messages value is an array that stores messages from our chat-based conversation with the AI. Each message contains both a role and content. The role can be either:

system This is the initial prompt sent to the AI, which gives it instructions on how to behave. For example, you may use “You are ChatGPT, a language model trained by OpenAI.” or “You are a software engineer who develops software programs, web applications, and mobile applications using various programming languages and development tools.” Experimenting with different initial system messages can help you fine-tune the AI’s behavior.
user This represents the user’s input. For example, the user could ask, “Can you provide a JavaScript function fetching the current weather?”
assistant This is the AI’s response, which the API endpoint will return.

Step 3: Creating the messaging functions

Now that the endpoint is ready to interface with the AI, we can begin designing our user interface to facilitate interaction. To start, we’ll create the sendMessage function. Here’s how:

Create a new file named sendMessage.ts in the utils folder.
Add the following code to sendMessage.ts:

import { ChatCompletionRequestMessage } from 'openai'

export const sendMessage = async (messages: ChatCompletionRequestMessage[]) => {
  try {
    const response = await fetch('/api/createMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ messages }),
    })

    return await response.json()
  } catch (error) {
    console.log(error)
  }
}

With this function in place, you can establish communication between the user interface and the AI via the API endpoint.

Now let’s setup the logic to create new messages inside a useMessages hook. Inside the utils folder, create a file named useMessages.ts and add the following code:

import { useToast } from '@apideck/components'
import { ChatCompletionRequestMessage } from 'openai'
import {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from 'react'
import { sendMessage } from './sendMessage'

interface ContextProps {
  messages: ChatCompletionRequestMessage[]
  addMessage: (content: string) => Promise<void>
  isLoadingAnswer: boolean
}

const ChatsContext = createContext<Partial<ContextProps>>({})

export function MessagesProvider({ children }: { children: ReactNode }) {
  const { addToast } = useToast()
  const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([])
  const [isLoadingAnswer, setIsLoadingAnswer] = useState(false)

  useEffect(() => {
    const initializeChat = () => {
      const systemMessage: ChatCompletionRequestMessage = {
        role: 'system',
        content: 'You are ChatGPT, a large language model trained by OpenAI.',
      }
      const welcomeMessage: ChatCompletionRequestMessage = {
        role: 'assistant',
        content: 'Hi, How can I help you today?',
      }
      setMessages([systemMessage, welcomeMessage])
    }

    // When no messages are present, we initialize the chat the system message and the welcome message
    // We hide the system message from the user in the UI
    if (!messages?.length) {
      initializeChat()
    }
  }, [messages?.length, setMessages])

  const addMessage = async (content: string) => {
    setIsLoadingAnswer(true)
    try {
      const newMessage: ChatCompletionRequestMessage = {
        role: 'user',
        content,
      }
      const newMessages = [...messages, newMessage]

      // Add the user message to the state so we can see it immediately
      setMessages(newMessages)

      const { data } = await sendMessage(newMessages)
      const reply = data.choices[0].message

      // Add the assistant message to the state
      setMessages([...newMessages, reply])
    } catch (error) {
      // Show error when something goes wrong
      addToast({ title: 'An error occurred', type: 'error' })
    } finally {
      setIsLoadingAnswer(false)
    }
  }

  return (
    <ChatsContext.Provider value={{ messages, addMessage, isLoadingAnswer }}>
      {children}
    </ChatsContext.Provider>
  )
}

export const useMessages = () => {
  return useContext(ChatsContext) as ContextProps
}

Step 4: Implement the message UI components

Having set up our functions, we can now design UI components that will use these functions to create an interactive chat interface. Follow the steps below:

Create a new file called MessageForm.tsx in the components folder of your project and add the following code:

import { Button, TextArea } from '@apideck/components'
import { useState } from 'react'
import { useMessages } from 'utils/useMessages'

const MessageForm = () => {
  const [content, setContent] = useState('')
  const { addMessage } = useMessages()

  const handleSubmit = async (e: any) => {
    e?.preventDefault()
    addMessage(content)
    setContent('')
  }

  return (
    <form
      className="relative mx-auto max-w-3xl rounded-t-xl"
      onSubmit={handleSubmit}
    >
      <div className=" supports-backdrop-blur:bg-white/95 h-[130px] rounded-t-xl border-t border-l border-r border-gray-200 border-gray-500/10 bg-white p-5 backdrop-blur dark:border-gray-50/[0.06]">
        <label htmlFor="content" className="sr-only">
          Your message
        </label>
        <TextArea
          name="content"
          placeholder="Enter your message here..."
          rows={3}
          value={content}
          autoFocus
          className="border-0 !p-3 text-gray-900 shadow-none ring-1 ring-gray-300/40 backdrop-blur focus:outline-none focus:ring-gray-300/80 dark:bg-gray-800/80 dark:text-white dark:placeholder-gray-400 dark:ring-0"
          onChange={(e: any) => setContent(e.target.value)}
        />
        <div className="absolute right-8 bottom-10">
          <div className="flex space-x-3">
            <Button className="" type="submit" size="small">
              Send
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="ml-1 h-4 w-4"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
                />
              </svg>
            </Button>
          </div>
        </div>
      </div>
    </form>
  )
}

export default MessageForm

Now that we have set up the message UI components, we need to create the component to render the list of messages.

Create a new file called MessagesList.tsx in the components folder and add the following code:

import { useMessages } from 'utils/useMessages'

const MessagesList = () => {
  const { messages, isLoadingAnswer } = useMessages()

  return (
    <div className="mx-auto max-w-3xl pt-8">
      {messages?.map((message, i) => {
        const isUser = message.role === 'user'
        if (message.role === 'system') return null
        return (
          <div
            id={`message-${i}`}
            className={`fade-up mb-4 flex ${
              isUser ? 'justify-end' : 'justify-start'
            } ${i === 1 ? 'max-w-md' : ''}`}
            key={message.content}
          >
            {!isUser && (
              <img
                src="https://www.teamsmart.ai/next-assets/team/ai.jpg"
                className="h-9 w-9 rounded-full"
                alt="avatar"
              />
            )}
            <div
              style={{ maxWidth: 'calc(100% - 45px)' }}
              className={`group relative rounded-lg px-3 py-2 ${
                isUser
                  ? 'from-primary-700 to-primary-600 mr-2 bg-gradient-to-br text-white'
                  : 'ml-2 bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
              }`}
            >
              {message.content.trim()}
            </div>
            {isUser && (
              <img
                src="https://www.teamsmart.ai/next-assets/profile-image.png"
                className="h-9 w-9 cursor-pointer rounded-full"
                alt="avatar"
              />
            )}
          </div>
        )
      })}
      {isLoadingAnswer && (
        <div className="mb-4 flex justify-start">
          <img
            src="https://www.teamsmart.ai/next-assets/team/ai.jpg"
            className="h-9 w-9 rounded-full"
            alt="avatar"
          />
          <div className="loader relative ml-2 flex items-center justify-between space-x-1.5 rounded-full bg-gray-200 p-2.5 px-4 dark:bg-gray-800">
            <span className="block h-3 w-3 rounded-full"></span>
            <span className="block h-3 w-3 rounded-full"></span>
            <span className="block h-3 w-3 rounded-full"></span>
          </div>
        </div>
      )}
    </div>
  )
}

export default MessagesList

We do not want to show the initial system message, so if the role is system we return null. Next, we adjust the styling of the messages based on if the role is either assisten or user.

While we are waiting for a response, we show a loading element. For this loader element to animate, we need to add some custom CSS. Inside the styles folder, create a globals.css file and add the following:

.loader span {
  animation-name: bounce;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loader span:nth-child(2) {
  animation-delay: 50ms;
}
.loader span:nth-child(3) {
  animation-delay: 150ms;
}

Make sure to import the CSS file into your _app.tsx file:

import 'styles/globals.css'
import 'styles/tailwind.css'

import { ToastProvider } from '@apideck/components'
import { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ToastProvider>
      <Component {...pageProps} />
    </ToastProvider>
  )
}

We can use our message UI components in our application now that we have built them. Locate the pages directory and open index.tsx. Remove the boilerplate code in this file.

import Layout from 'components/Layout'
import MessageForm from 'components/MessageForm'
import MessagesList from 'components/MessageList'
import { NextPage } from 'next'
import { MessagesProvider } from 'utils/useMessages'

const IndexPage: NextPage = () => {
  return (
    <MessagesProvider>
      <Layout>
        <MessagesList />
        <div className="fixed bottom-0 right-0 left-0">
          <MessageForm />
        </div>
      </Layout>
    </MessagesProvider>
  )
}

export default IndexPage

We have wrapped our components with the MessageProvider so we can share the state between the components. We also added a container div to the MessageForm component, so it has a fixed position at the bottom of the page.

Step 5: Running the chat application

Nice job! We now reached the point where we could see our chat application in action. Here’s how you can test your ChatGPT application:

Make sure your development server is running. (yarn dev)
Navigate to the root URL of your application in your browser. (localhost:3000)
You should see the UI rendered on the screen. Type a message in the text field at the bottom and hit Send. The AI chatbot will respond to your message.

You can now engage in a conversation with your AI chatbot! Feel free to experiment with different types of messages and see how the AI responds.

Final words

Thank you for reading! The complete source code can be found here .

If you found this tutorial useful, please connect with me on Twitter or visit my personal website at jakeprins.com.

In addition, be sure to check out TeamSmart AI for my complete ChatGPT application. It’s a Chrome extension that allows different AI team members to help you with your daily tasks.

How to Set Up Tailwind CSS 2 With Next.js 10

Jake Prins — Fri, 01 Jan 2021 17:54:13 +0000

In the last months of 2020, a couple of great framework updates have been released. First was the release of Next.js 10, which came with a lot of nice features, like the new image component that automatically optimizes images.

Secondly, 18 months after the 1.0 release, the Tailwind team released v2.0 of their CSS framework. This new update included lots of improvements like a new color palette and dark mode support.

Using the latest version of Next.js with Tailwind CSS is a very powerful combination to create and style web applications. Let’s walk through the steps of setting a new project up.

Start a New Next.js Project

Assuming you have installed Yarn, open your terminal and run yarn create next-app in your projects folder.

You will get prompted with the following message:

What is your project named?

Fill in a name, hit enter, and wait until your project is ready. Then, type cd <your-project-name> to make sure you are inside that directory where you can run yarn dev to start the development server. You should now have your new Next.js 10 project up and running.

Install Tailwind and Its Dependencies

Tailwind CSS is a plugin built on PostCSS, a tool for transforming CSS with JavaScript. The v2.0 has been updated for the latest PostCSS release, which requires installing postcss and autoprefixer as peer dependencies alongside Tailwind itself.

Add Tailwind and install PostCSS as well as autoprefixer using npm or yarn:

yarn add tailwindcss postcss autoprefixer

Create Config Files

We need to add a tailwind.config.js and a postcss.config.js file to the root of our application. Use the following command to set this up:

npx tailwindcss init -p

This will create a tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer configured:

Import the CSS

Let’s create a styles folder and import Tailwind CSS from a CSS file:

touch styles/tailwind.css

Inside tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

To add global CSS to a Next.js app, we need to override the default App component. With Next.js 10, you should already have _app.js inside your pages folder. Now import the stylesheet we created:

import '../styles/globals.css'
import '../styles/tailwind.css';export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Cool, now we are ready to add some Tailwind CSS magic to our home page. Go to /pages/index.js (or /pages/index.tsx if you use TypeScript) and add some elements with Tailwind CSS classes. For example:

Run yarn dev to see your app on http://localhost:3000 in your browser.

Configure PurgeCSS

One problem with Tailwind CSS is the large file size, but PurgeCSS can fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. We only want this in production because if we are developing, we want to be able to use any Tailwind CSS class without running the build process.

Now with Tailwind CSS v2, PurgeCSS is already included. All you have to do is update the tailwind.config.js file so Tailwind can tree-shake unused styles in production builds. Update your file like this:

For now, we check all of our code inside .js, .jsx, .ts or .tsx files that live in either the pages/ or components/ folder. If you plan to add HTML in other folders like containers/ or something, make sure you add that folder to this configuration file.

You can read the guide from Tailwind on optimizing for production to learn more about tree-shaking unused styles for best performance.

Conclusion

Now we are ready to work with the latest versions of Next.js and Tailwind CSS without having to worry about bundle sizes!

That’s it! Thanks for reading. I hope it was helpful.

If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then check out Serverless SaaS, the SaaS starter-kit for React developers. You can also follow me on Twitter, or at jakeprins.com.

NextWind: A free starter-kit for building landing pages + blog

Jake Prins — Wed, 16 Dec 2020 12:18:06 +0000

I made a starter-kit for building a blog or landing pages quickly with Next.js, Tailwind CSS, and Netlify CMS.

It allows you to switch between different versions of page sections from within the CMS. To do this, simply change for example hero_version from 1 to 2 or 3. The preview is immediately updated to show you the styling of the selected version.

The sections are mostly brought to you by Tailblocks, some ready-to-use sections built with Tailwind CSS.

You can find the repository here: https://github.com/jakeprins/nextwind

How to Use ESLint and Prettier in Your Next.js

Jake Prins — Sun, 13 Dec 2020 18:06:12 +0000

Automated lint tools can help developers save time and keep everybody on the same page. When everybody on your team follows the same rules, you don’t have to waste time discussing code style issues. These tools can catch a lot of syntax and type errors.

Combining ESLint with Prettier is a nice way to perform both automated syntax scans on your code and reformatting. This will ensure that consistent rules are being followed for indentation, spacing, semicolons, etc.

Let’s set up these technologies to use them in a Next.js project that uses TypeScript. If you are starting a new project, you can read my article about how to set up Next.js with TypeScript.

ESLint

Let’s start by adding the core ESLint linting library, the parser to lint TypeScript code, a TypeScript-specific plug-in, and a React-specific plug-in to our project.

In the terminal, go to the root of your project and run the following command:

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

We should now create a .eslintrc.json file at the root of our project. We can add our linting rules in this file:

touch .eslintrc.json

You can already add the default options to that file. We will add our options as we go:

{
  "parser": {},
  "extends": \[\],
  "rules": {},
  "globals": {}
}

By default, ESLint depends on a parser to read JavaScript code. We use @typescript-eslint/parser (an alternative parser that can read TypeScript), so we need to tell ESLint to use it instead. Besides that, we use @typescript-eslint/eslint-plugin (a list of rules you can turn on or off). We also extend the plug-in react/recommended, which contains React-specific linting rules.

To configure the parser and extend the plug-ins, we need to modify the file we need to update our config like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react/recommended"
  ],
  "rules": {},
  "globals": {}
}

Next.js does not require you to import React into each component, which means you will start getting errors if you use this config in a Next.js application. We can fix this by adding React into our global and turning the react-in-jsx-scope rule off.

Our final config will look like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Prettier

Now let’s add Prettier and some plugins to make it work nicely with ESLint:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier will disable any linting rule that might interfere with an existing Prettier rule, and eslint-plugin-prettier will run Prettier analysis as part of ESLint.

Let’s add them to our ESLint config to finish up our ESLint configuration. Make sure to put Prettier last so it can override other configs:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:prettier/react",
    "plugin:prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint",
    "react",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Configure Prettier

Prettier is opinionated and intentionally limits the number of options (read why). If you want, you can overwrite some rules of Prettier by creating a .prettierrc file in the root of your project:

touch .prettierrc

The following configuration is an example file. I personally use this as my setting, but you can find all available configurations in the official documentation.

{
    "semi": true,
    "singleQuote": true
}

Add a git hook

Optionally, you can use husky and pretty-quick to add a git hook that will always lint and format your changed files.

First, install them as dev dependencies:

yarn add pretty-quick husky -D

Now add the following husky and lint-staged configuration to your package.json:

"scripts": {
  ...
  "lint": "eslint --ext .ts,.tsx",
},

Add the pre-commit hook in your package.json:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged && npm run lint"
   }
},

Now, whenever you commit your changes, it will format and lint your new code.

Code Editor Extensions

If you haven’t done so already, I recommend installing the Prettier and ESLint extensions for your code editor. If you don’t want to format your file manually every time, you can format it on save as well. I highly recommend this. For Visual Studio Code, all you need to do is open your VSCode User settings/preferences and set the Format On Save option to true.

That’s it! Thanks for reading. I hope it was helpful.

SASS vs CSS-in-JS vs Tailwind CSS

Jake Prins — Sat, 12 Dec 2020 14:59:00 +0000

As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SaaS web apps.

In Stack Choices, I take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript, React vs Vue vs Angular vs Svelte, and Create React App vs Next.js.

This time, let’s take a look at some options for styling the application. I’ve worked with different approaches like CSS modules, Styled-Components, frameworks like Bootstrap, or just vanilla CSS. In this post, we are going to focus on three of my favorites: SASS, CSS-in-JS, and Tailwind.

SASS

Going with classical CSS, using a preprocessor like SASS has been my way of styling applications for years. CSS is easy to learn but very hard to maintain. That’s why, as your project grows larger, you need a proper structure. BEM (Block Element Modifiers), is a naming styling that tries to solve the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.

CSS preprocessors in combination with BEM definitely improve the development experience a lot, but that doesn’t mean it’s perfect. When your codebase grows, you might start to wonder in which files you should put certain styles and how it should be scoped. You also wonder if old styles are still being used. And you also have to think about performance: you don’t want to load in every single line of CSS on the first page when most of it is used on other pages.

There are many solutions to these problems, but one approach that I personally like is writing your CSS in JavaScript.

CSS-in-JS

There are multiple CSS-in-JS libraries out there, like Styled-Components, Emotion, and Styled-JSX, and it has some benefits over using classic CSS. I personally really like the fact that it makes it simple to add specific CSS to a component. All styles are only applied to the component, so this also means you do not have to learn methodologies like BEM, use long class names, or need to think about where you put your styles.

The other main advantage is that styles are rendered only if the component is on screen. You don’t have to worry about performance or unused styles. Also, because of the component-based architecture, we can have changes controlled by props. If you are a JavaScript developer I think you don’t need a lot of time to feel very familiar with writing your styles in JavaScript as well.

At first look, CSS-in-JS might look difficult, because the learning curve is a little bit bigger than using SASS. But if you are working on a component-heavy JavaScript project, I think CSS-in-JS is definitely worth trying out.

TailwindCSS

Tailwind is a CSS framework, but not like Bootstrap or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.

If you go for a framework, you usually need to stick to the components of that framework, which can lead to overriding unwanted styles or battling specificity wars. Tailwind is different, it’s basically a different way of styling your application.

There are great benefits of using Tailwind, like development speed. Tailwind provides almost all the tools you need to build out a site in just HTML, so you rarely need to write any custom CSS.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="[https://cdn-images-1.medium.com/fit/c/32/32/1\*\_SiS1xvFOqiK6TnkiGcZ2A.jpeg](https://cdn-images-1.medium.com/fit/c/32/32/1*_SiS1xvFOqiK6TnkiGcZ2A.jpeg)" alt="Jake"/>
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="text-sm tracking-wide uppercase text-cloud-burst-600 font- bold">Marketing</div>
      <a href="#" class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

Tailwind was built from the ground-up to be super customizable. It comes with a default configuration, but you can simply override the default configuration with a tailwind.config.js file in your project.

Also, any changes you make will be made in your templates, therefore only affecting the page you’re working on.

Besides that, all its utilities are also generated with responsive versions which are very helpful if you want to make your application look nice on mobile, tablet, and desktop.

One thing I didn’t like about using Tailwind is the long class names you can end up with. The more styling you need on a single element, the longer that class name is going to be. This harms the readability of your HTML files a bit, but after a while, I got used to it and it doesn’t bother me that much anymore.

The other problem with Tailwind is the large file size, but you can use PurgeCSS to fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. Luckily, setting up PurgeCSS to work with Tailwind is easy, so this could make Tailwind an absolute winner.

Conclusion

There are many ways to manage the styling of your application. In the beginning, this is easy, but when your projects start to grow you will encounter difficulties. Using a traditional approach to CSS is not a wrong decision, but nowadays there are other options you could consider. Personally, I like CSS-in-JS a lot and as a JavaScript developer, it makes sense to me to go with this approach.

On the other hand, I’ve been working a lot with TailwindCSS lately and I don’t think I’ve ever been that excited about a CSS framework. I made some projects, like RemoteRocket.io, with TailwindCSS and I’ve noticed a huge boost in productivity while working on it. Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you master those. And not needing to switch files while styling your HTML elements feels like a blessing.

With all that in mind, I’ve made my stack choice: TailwindCSS. If you think differently, please try to change my mind! Reach out top me on Twitter: @jakeprins_nl.

If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.

React vs Vue vs Angular vs Svelte

Jake Prins — Sat, 12 Dec 2020 14:57:00 +0000

React vs Vue vs Angular vs Svelte

5 min read

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episode, I took a look at JavaScript vs TypeScript. This time, let’s take a look at the JavaScript frameworks.

Angular

This JavaScript framework, developed by Google, has been around for a while and it’s not really the cool kid on the block inside the frontend community. The move from angular 1 (AngularJS) to Angular 2, which was so different it required complete rewrites, seems to left some scars, but times have changed and lots of progress has been made.

Updating your application to the next major version of Angular has never been easier. Since Angular 8, you can just use ng update it to update your application and its dependencies. Besides that, with the new Angular CLI, you can generate components, routes, services, and pipes with a simple command. Besides that, Angular is very stable and has support for great technologies like Typescript and Web Workers, etc. Also, the new Ivy renderer is officially released in Angular 9, which decreased payload size and has a lot of other interesting benefits.

My opinion

After first working with React for quite some time I joined a team that worked with Angular. I have now worked with them for over a year and although I was a bit skeptical at the beginning, I started to like Angular more and more. Some people complain about the file size or that the framework is too bloated, but I think it’s nice to have a framework that has lots of features built-in. It’s not as easy to pick up as Vue or React, and I also wouldn't choose it for smaller side-projects, but for production applications, especially those that you need to work on with multiple people, Angular is a very nice framework.

React

According to NPM trends, React is by far the most downloaded framework. Stack Overflow Trends also reveals that React receives the largest percentage. It’s easy to see why lots of people choose React for there new applications: it’s a save bet. Large companies such as Airbnb and Netflix have been using React.js for many years now, and we see that the technology is being embraced by more and more companies. The interest in React among developers is huge and that makes it a technology that will probably gain even more popularity in the upcoming years.

My opinion

Most popular doesn't mean it’s the best, also React has its flaws. But personally, I absolutely like working with it. I have made most of my side-projects with React, like RaterFox, Codestash, MakerMove, and more. I think it’s easy to get started with React, but when you build large applications you find yourself reaching for a lot of other libraries just to get some basic things done, like routing or global state management. These libraries usually all have there strong points and weaknesses. It’s nice to have the freedom to choose but at some point, I think it would help the developer community if we could just all go for the same thing. Instead of introducing yet another state management library or another way to implement CSS-in-JS, I think it might be beneficial to sometimes have fewer choices.

I’ve made a React boilerplate called React Milkshake that can give you a headstart with your new project. And I’m working on a React starter-kit with Nextjs to build full-stack SaaS applications. You can sign up here to get notified when it launches.

Vue

Another amazing JS framework is Vue.js. With very detailed documentation and a fairly low learning curve, Vue.js is a suitable choice when you want to experiment with a new framework as a developer.

Because of the resemblance to React and Angular in terms of architecture, it is an easy transition from other frameworks. Loved for its small size, speed and flexibility, Vue.js delivers even better performance compared to other frontend frameworks.

Vue.js currently still has a much smaller market share compared to React. Due to the positive opinions from the developer community and the growth in the use of Vue, it seems likely that Vue.js will continue to develop positively.

My opinion

I have little personal experience with Vue, but to experiment with it I made RemoteRocket, a platform with all the remote jobs from popular remote job sites. It’s easy to pick up, especially with the Vue CLI, and I definitely recommend giving Vue a try (if you haven’t already).

Svelte

The big underdog of the frontend frameworks: Svelte. It’s been around for a couple of years and in April 2019 version 3.00 was released. Svelte is a little different than React, Vue, or Angular because it compiles your code to tiny, framework-less vanilla JS. And it’s not just very performant, with no run-time dependencies, it’s also very elegant and easy to learn the framework. It’s npm downloads have more than tripled over the last year, and in the results of the 2019 State of JS survey, it showed that 44.9% of JS developers were interested in learning Svelte. Time has to tell if people will actually adopt it in production applications, so I’m curious about what the future will bring for Svelte.

My opinion

I personally haven’t got the time to try out Svelte, but it’s very high up on my list of technologies to explore. If you want to learn more I can recommend you this video of Rich Harris’ (the creator of Svelte) talk about Rethinking reactivity or to listen to this podcast episode of the Syntax.fm where Scott Tolinski teaches Wes Bos about Svelte. It got me really excited and I can’t wait to start trying it out myself!

Conclusion

Angular, React, Vue, or Svelte, are all great frameworks. I’ve worked with all of them except Svelte. I would really love to work with Svelte, but for my plan to build the best JavaScript boilerplate for building a SAAS business, I need to go with a framework I’m very experienced with. Besides that, popularity plays an important role, and for that reason, my choice has become: React.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.

How to Implement Netlify CMS With Next.js

Jake Prins — Mon, 30 Nov 2020 09:28:52 +0000

Manage the content of your Next.js apps through a free Git-based CMS

If you’re starting a new React project, you might want to consider Next.js and Netlify CMS. In this article, we take a look at why this would be a great choice and walk through the process of setting up a new project using these technologies.

Why Next.js?

As I stated in a previous article:

“There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.

Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you with. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems.”

If you want to read more about CRA vs. Next.js, check out Stack choices: Create React App vs Next.js.

Why Netlify CMS?

Netlify CMS is an open-source Git-based content management system. It is based on client-side JavaScript and handles content updates directly in Git. Because all content is just stored in your Git repository, you don’t need to have anything hosted on a server. It’s completely free and a great fit to combine with Next.js to build landing pages or blogs that are manageable through a nice UI.

Let’s Begin

Let’s begin building our landing page with some basic text to get familiar with Netlify CMS. You can find the source code of this part of the tutorial on GitHub or check out serverless.page for a complete boilerplate that also includes features like authentication and billing.

Set up your project

You can start by creating a new Next.js project with npx create-next-app. In this example, we are going to use TypeScript. You can follow this tutorial on how to set up Next.js with Typescript.

Using Markdown Files for Our Content

Netlify CMS works with markdown files, and it’s a great way to manage the content of your landing page or blog. Let’s begin by creating a markdown file that will have some data we want to show on our home screen.

Make a content directory that will hold all our markdown files. Next, create a pages directory and a markdown file called content/pages/home.md. This file will hold the data that we want to show on our home page. Let’s start by adding a title, description, and image for the “hero” section of our landing page:

---
hero_title: "Build a SaaS faster with React"
hero_description: "Serverless SaaS is aiming to be the perfect starting point for your next React app to build full-stack SaaS applications. Visit serverless.page for more info."
---

Next, we need to tell webpack how to load markdown files. Let’s use frontmatter-markdown-loader for this. Start by installing that package as a dev dependency:

yarn add frontmatter-markdown-loader -D

Next, create a new next.config.js file at the root of your project with the following content:

Create the home page

Cool, now let’s add some code to the index page to make it our home page.

In pages/index.tsx, add the following:

Let’s have a look at what’s going on here. The most important part is the exported getStaticProps function. If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

On our page, we import our markdown file called home.md and pass it a content prop to our component. Our home page can now use the hero_title and hero_description attributes of the markdown file.

Let’s try it out and see if it’s working:

yarn dev

You should see your amazing hero section, ready to be styled and managed with your upcoming CMS.

Implement Netlify CMS

There are different ways to add Netlify CMS to your project. We are going to use the official npm package:

yarn add netlify-cms-app

Add the configuration

Before we can initialize our CMS, we need to create a config file. Create a cms directory at the root of your project and paste the following configuration to your cms/config.js:

export default {
  cms_manual_init: true,
  backend: {
    name: 'github',
    repo: 'yourname/your-github-repo-name',
    branch: 'main',
  },
  media_folder: 'public/img',
  public_folder: 'img',
  collections: [
    {
      name: 'pages',
      label: 'Pages',
      files: [
        {
          label: 'Home',
          name: 'home',
          file: 'content/pages/home.md',
          fields: [
            {
              label: 'Hero Title',
              name: 'hero_title',
              widget: 'string',
            },
            {
              label: 'Hero Description',
              name: 'hero_description',
              widget: 'markdown',
            },
          ],
        },
      ],
    },
  ],
};

Netlify CMS has different options on how to handle authentication. We are going to use this config file to tell Netlify CMS that we want to use the GitHub for this. For repositories stored on GitHub, the github back end allows CMS users to log in directly with their GitHub account. Note that all users must have push access to their content repository for this to work.

If you haven’t done already, now would be a good time to create your repository on GitHub, add the name of your repo to the config file, and push your code to GitHub. Go ahead — I’ll wait.

Good, but before we move on, let’s take a look at the most important setting of our configuration: the collections. This determines how content types and editor fields in the UI generate files and content in your repository.

Inside collections, we create a pages collection that has some settings for the home page. For now, we only added the hero_title and hero_description fields. You can set which widget to use for the given property.

You can read about all other configuration options in the documentation.

Initialize the CMS

Next, let’s create an admin page for our CMS. Add the following code to pages/admin.tsx:

import dynamic from 'next/dynamic';
import config from '../cms/config';

const CMS = dynamic(
  () =>
    import('netlify-cms-app').then((cms) => {
      cms.init({ config });
    }),
  { ssr: false, loading: () => <p>Loading...</p> }
);

const AdminPage: React.FC = () => {
  return <CMS />;
};

export default AdminPage;

Now you should be able to navigate to http://localhost:3000/admin and see a GitHub login button. Hit the button and see your nice new CMS!

Try it out

Cool, now try it out! Select “Home” and you will see the edit page. You can edit the hero_title and hero_description properties and click the publish button. When you publish, Netlify CMS is making a commit to your repository with the changes you just made. You can take a look at the last commit after you have published some changes.

Now, all you have to do is git pull to get those changes locally and navigate back to http://localhost:3000/. You will see that the home page contains your changes. Sweet!

Adding Images

Most hero sections contain a pretty image. Let’s use the image widget to add an image to our hero section. Go to your cms/config.js file and add the following object to the fields array:

{
  label: 'Hero Image',
  name: 'hero_image',
  widget: 'image'
}

Next, we could simply add an image to our public/img folder and add it to our home.md, but to demonstrate how Netlify CMS works, we are going to use the CMS to do it.

First, we need to upload an image to our integrated media library. On the dashboard of the CMS, click the “Media” link in the top navbar and upload an image. After that, navigate to the edit screen of the home page.

You should now see the added hero_image field with a button that says, “Choose an image.” You can now select your uploaded image and publish the changes.

Great, we should now have a new commit to our repo with the new changes. If our application was already in production, we could see the changes live, but since we want to see these changes locally, we need to first pull them from GitHub.

After you have run git pull, there is really only one thing left to do, which is adding the image to our home page:

...
<img src={attributes.hero_image} alt='hero image' />
...

Now, run yarn dev and go to http://localhost:3000/ to see your added image!

Conclusion

Netlify CMS is a very useful library you can add to your Next.js apps. It’s just a client-side React application, and it uses Git to store content in your own repository. This has some nice benefits: You don’t need to host your CMS separately and it fits perfectly in your Git workflow. This is great for managing the content of a landing page or blog post.

If you are looking for a complete boilerplate, check out serverless.page.

Next Steps

We have covered a lot in this tutorial, but we have only seen the basics of how Netlify CMS works in a Next.js application. There is a lot more we can do! Stay tuned for upcoming articles to continue our work with:

A blog
More widgets for managing content
Styling and CMS previews
Customizing with additional configuration settings

View the source code of this tutorial on GitHub.

Thanks for reading! You can find me on Twitter (@jakeprins_nl) or read more at jakeprins.com/blog.

Create React App vs Next.js

Jake Prins — Mon, 12 Oct 2020 13:23:50 +0000

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript and React vs Vue vs Angular vs Svelte. This time, let’s take a look at Create React App (CRA) vs Next.js.

CRA is a tool that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project. This is great to start focusing on building your application from the start and don’t waste time configuring your webpack etc. But for building performing production-ready applications, you might need a little bit more. You might need serverside-rendering for SEO, or code-splitting to increase performance. You could use a boilerplate that has some features built-in (like React Milkshake), or you can take a look at a framework like Next.js.

Next.js

Next.js is a framework built by Vercel. It’s open-source, based on Node.js and Babel, and it integrates with React to develop single-page applications. It makes Serversside rendering very easy. According to nextjs.org:

With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

Next.js also supports static exporting, pre-Rendering, and has a lot more nice features like automatic building size optimization, faster dev compilation, and preview mode.

In my opinion, the current version of Nextjs is what React was missing for a long time. It has all the features you need when you build a production-ready application that needs to perform. Also, the docs are nice and it’s becoming more and more popular among front-end developers.

Next.js is really good, but that doesn’t mean you should always go with this framework.

Although it makes server-side rendering a lot easier, it still introduces some complexity. For instance, if you use Redux, your store should also be in sync on the server. And when you use translated labels inside your application, be aware that this must also be handled on the server.

Also, for every server-rendered route that you have, a serverless function will be created. Currently, the free tier a limitation of 12 serverless functions, so if you use SSR and your app has more than 12 routes you need to pay for hosting. This might not be a problem for everybody, but when you build your app with CRA you are sure you can host it on platforms like Vercel, Netlify, or Render for free. I wrote an article that dives a little deeper into this, you can read it here: Why I Migrated From Next.js to Create React App

Conclusion

CRA is a great starting point for your next app, but to take things to the next level I think Nextjs can come in handy. It does introduce a little more complexity in certain areas and I’m not really happy with serverless functions limitations, but I think Next.js offers so many nice features that my decision is clear: Next.js.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then subscribe here to follow my progress in building the SaaS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.

Stack Choises: JavaScript vs TypeScript

Jake Prins — Fri, 09 Oct 2020 12:12:38 +0000

JavaScript vs TypeScript

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. This time, let’s take a look at going with plain old JavaScript or the rising star: TypeScript.

What is TypeScript?

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

You can easily use Typescript when starting a new React application by running yarn create-react-app my-app --template typescript or work with Angular, which comes with Typescript by default.

How popular is TypeScript?

TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in the state of js survey) admit they would like to use or learn TypeScript in their next project. Besides that, it's one of the most loved languages, according to the 2019 Developer Survey by Stack Overflow.

My personal experience

I have been working with Typescript full-time for over a year now, and I have experienced the benefits of using TypeScript when working in a team. Something I personally like is, for example, the rich IDE support. I’m using VSCode and it offers features like code navigation, autocompletion, and providing accurate suggestions. You also get feedback while typing like flagging type-related errors as soon as they occur. This can help you write more maintainable code.

Although TypeScript is really good, it’s not perfect. In the beginning, I didn’t like working with TypeScript at all. It requires some time to learn and you need to write more code than with just JavaScript.

Here are, in my opinion, the pros and cons of choosing Typescript for your next project.

Pros for using Typescript

It has rich IDE support
It has object-oriented programming features
It helps to spot bugs early
It is used in popular frameworks
It’s growing in popularity

Cons for using Typescript

Writing more code
Takes time to learn
Adds complexity

Conclusion

Although TypeScript requires you to write some more code and could take developers some time to learn, it’s benefits outweigh that in my opinion. We also see steady growth in the adoption of the language so I think this is not a hard decision to make. My stack choice: TypeScript.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.

How to Set Up Next.js With TypeScript

Jake Prins — Fri, 18 Sep 2020 06:47:23 +0000

If you start a new React project, you might want to consider Next.js and TypeScript. In this article, I explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.

Why Next.js

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler, like webpack, and transformed using a compiler, like Babel.

Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, prerendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you with. You can save your self some time by using a Next.js, a React framework that provides a solution to all of these problems.

Why TypeScript?

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation and allowing TypeScript to validate that your code is working correctly.

TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in the State of JS survey) admit they’d like to use or learn to use TypeScript in their next project. Besides that, it’s one of the most loved languages, according to the 2019 developer survey by Stack Overflow.

It’s very popular and has lots of benefits during development. I’ve specified these benefits some more in “Stack Choices: JavaScript vs TypeScript.”

Let’s Start

If you start from scratch, open your terminal, and inside your projects folder, run yarn create next-app (Yarn is used in this example, but you could, of course, also go with npm).

You’ll get prompted with the following message:

What is your project named?

Fill in a name, and hit enter. The next message you’ll see is:

Pick a template

Choose Default starter app, and wait until your project is ready. Then, type cd <your-project-name> in your terminal to make sure you’re inside the directory where you can run yarn dev to start the development server.

If everything is fine, we can set up TypeScript. Start by creating an empty tsconfig.json file in the root of your project:

touch tsconfig.json

Try restarting the development server (yarn dev). You’ll get a warning message, like this:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Follow the instructions to install TypeScript:

yarn add --dev typescript @types/react @types/node

Now, try starting the development server again. After starting the server, Next.js will:

Populate the tsconfig.json file for you. You may customize this file.
Create the next-env.d.ts file, which ensures Next.js types are picked up by the TypeScript compiler. You should not touch this file.

Now let’s try it out by changing the index.js to index.tsx. If nothing breaks, that means you can now use TypeScript for your Next.js application.

And that’s it! Good luck with your project, and feel free to ask any questions if you have any.

Thanks for reading.

If you’re interested in saving time on your next project and skip implementing authentication, payments, teams, and more, then go here and subscribe to follow my progress in building the SaaS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.

Code Splitting by Routes and Components in React

Jake Prins — Thu, 30 Jan 2020 09:06:37 +0000

When your app's bundle starts to grow it will slow things down. That's why we see a lot more use of code-splitting in modern web development. Code-splitting is the process of taking one large bundle containing your entire app and splitting them up into multiple smaller bundles which contain separate parts of your app. This technique allows you to load chunks of code only when needed.

For example, when a visitor enters your application on the homepage, there is no need to load in all the code related to a completely separate page. That user might not even go to that route at all, so we only want to load it when the user navigates to that page. If we can load only the code necessary for the home page this means our initial loading time will be a lot faster, especially on slow networks.

In this post, we will take a look at how we can boost the performance of our React applications by implementing code-splitting using React Loadable. If you rather save time and start with a boilerplate that includes code-splitting, try out React Milkshake.

Route-based splitting

A great way to get started is to implement route-based code-splitting, which means we load code chucks according to the current route.

Normally, our routes could something look like this:

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from 'pages/Home';
import Example from 'pages/Example';

const Routes = () => {
  return (
    <Switch>
      <Route path='/' exact component={Home} />
      <Route path='/example' component={Example} />
    </Switch>
  );
};

export default Routes;

Now, let's refactor these routes to implement code splitting using React Loadable. The Loadable higher-order component takes an object with two keys: loader and loading.

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const AsyncHome = Loadable({
  loader: () => import('./pages/Home'),
  loading: <div>Loading...</div>
});

const AsyncExample = Loadable({
  loader: () =>
    import('./pages/Example'),
  loading: <div>Loading...</div>
});

const Routes = () => {
  return (
    <Switch>
      <Route path='/' exact component={AsyncHome} />
      <Route path='/example' component={AsyncExample} />
    </Switch>
  );
};

export default Routes;

With this simple setup, the code related to the Example component will only load when that route is active. If you open your inspector in your browser and go to your network tab (js), you can see that if you change your routes a new code chunk will be loaded.

Pro-tip. If you want to give your chunk a name instead of a generated hash, so you can clearly see which chunk just loaded, you can set the webpackChunkName like this:

const AsyncExample = Loadable({
  loader: () =>
    import(/* webpackChunkName: "Example" */ './pages/Example'),
  loading: <div>Loading...</div>
});

Sometimes components load really quickly (<200ms) and the loading screen only quickly flashes on the screen. A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster. Thankfully, your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay. Be default, delay is set to 200ms.

To do that, let's create a Loader component that we can use in our sample component that will now look like this:

const AsyncExample = Loadable({
  loader: () =>
    import(/* webpackChunkName: "Example" */ './pages/Example'),
  loading: Loader
});

And our Loader component:

import React from 'react';

const Loader = (props) => {
    if (props.pastDelay) {
        return <h2>Loading...</h2>
    } else {
        return null
    }
}

export default Loader;

But what if something goes wrong while loading the code? Well, luckily React Loadable also provides users with an error prop. This means our final Loader component will look like this:

import React from 'react';

const Loader = ({ pastDelay, error }) => {
    if (error) {
    return (
      <h2>Sorry, there was a problem loading the page.</h2>
    );
  } else if (pastDelay) {
    return (
       <h2>Loading...</h2>
    );
  } else {
    return null;
  }
};

export default Loader;

And that's it!

Load on hover

Now we can even go a little further. We can also start loading the next chunk as soon as the user starts to hover over the link. To achieve this, all we have to do is call preload() on our Loadable component. It will look something like this:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

import { AsyncExample } from 'routes';

const SideBar = () => {
  return (
    <div className='sidebar'>           
      <Link to='/' exact={true}>Home</Link>
      <Link 
        to='/example' 
        onMouseOver={() => AsyncExample.preload()}>
        Example
      </Link>     
    </div>
  );
};

export default SideBar;

And that's it, awesome!

Component-based splitting

Now that we know how to code split based on the current route, let's take it even a little further and look at how we can code split on component level. Inside your container component, you might render different components based on a certain state, like if a user is logged in or not. We can achieve this with the same Loadable component. Take a look at this example, in which a component is only rendered into the view once the user clicks on the button.

import React, { useState } from 'react';
import Loadable from 'react-loadable';
import Loader from 'components/Loader';

const SomeComponent = Loadable({
  loader: () => import('components/SomeComponent'),
  loading: Loading
});

const App = () => {
    const [showComponent, setShowComponent] = useState(false);

  return (
    if (showComponent) {
      return <SomeComponent />;
    } else {
      return (
        <>
          <h1>Hello! 👋</h1>
          <button onClick={() => setShowComponent(true)}>Click me!</button>
        </>
      );
    }
  );
};

export default App;

Obviously, with such a simple component, it doesn’t make a difference, but with larger components in an app, it can be a good idea to implement code-splitting on component-level like this.

And with this, you should be ready to implement code splitting in your React apps! Check out the repo of React Loadable for more options. If you are looking for a nice boilerplate that comes with code-splitting out of the box, try out React Milkshake.

Thanks for reading! If you want to ben notified when I release new projects or articles then follow me on twitter: @jakeprins_nl.