[Next] Getting Started (with TypeScript, TailwindCSS)

Next is an awesome framework.

The homepage represents "The React Framework for Production" as its motto. 

It supports TypeScript with React.

In addition, it also supports easy SSR, zero-configuration, SEO friendly, and routing based on the folder structure.

 

Now, let's start !!

Create a Project

$ npx create-next-app my_next_app --example with-typescript
$ cd my_next_app
$ yarn dev

Now, access our application via a web browser.

http://localhost:3000

Editing Our Page

Let's modify the main page.

 

pages/index.tsx

import Link from 'next/link'
import Layout from '../components/Layout'

const IndexPage = () => (
  <Layout title="Home | Next.js + TypeScript Example">
    <h1>Hello Next.js 👋</h1>
    <h2>I can edit like this</h2>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
  </Layout>
)

export default IndexPage

Then our webpage automatically updated.

Routing

Let's take a look at the routing based on the folder structure.

You can see this code in the pages/index.tsx.

<Link href="/about">

/about means pages/about.tsx.

Same as this / means pages/index.tsx.

 

Let's find out more about routing.

/users means pages/users/index.tsx.

/users/[id] means pages/users/[id].tsx.

 

Don't you want to make our own routing now?

 

pages/mine.tsx

import Link from 'next/link'
import Layout from '../components/Layout'

const MyPage = () => (
  <Layout title="About | Next.js + TypeScript Example">
    <h1>My Page</h1>
    <p>This is my page</p>
    <p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </p>
  </Layout>
)

export default MyPage

Let's access this page.

http://localhost:3000/mine

Feel it how to easy!!

TailwindCSS

Now, let's add TailwindCSS to our project.

$ yarn add -D postcss postcss-preset-env tailwindcss @fullhuman/postcss-purgecss
$ npx tailwind init

Create postcss.config.js.

module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./pages/**/*.{js,jsx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          },
        ]
      : undefined,
    "postcss-preset-env",
  ],
};

Create styles/index.css.

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;

Create pages/_app.tsx.

import React from "react";
import { AppProps } from "next/app";

import "../styles/index.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

 

Then, we're ready to use TailwindCSS.

Let's apply it.

 

pages/index.tsx

...
<h2 className="text-blue-500">I can edit like this</h2>
...

$ yarn build
$ yarn start

Great!!!

You will fall in love with these web frameworks!!