Taras Dashkevych

Frontend developer focused on inclusive design

Create pages with Next.js and Tailwind

I built a simple website, using Next.js and Tailwind under the hood.

This post serves as a collection of notes I made to demonstrate how I built pages for my website.

Preparation

To prepare for developing pages:

  1. Open a project with your website in Visual Studio Code, or any other preferable code editor.
  2. Under a root directory of the project, locate the pages directory.

Create pages

By default, Next.js installation often comes with the pages directory. The pages directory is designed to hold all of the pages for a website.

The naming convention for pages is all lowercase.

This directory also may include files such as index.js and _app.js, whereas the index.js file serves as a home page, and the _app.js file is responsible for the page initialization.

Additionally, you may find api directory inside pages. This inner directory is purposed for creating API routes. For example, this can be useful when creating a contact page.

App component

This component, functionality of which is located in _app.js under the pages directory, serves as an entry point for all pages on a website.

Note, creation of this component is totally optional.

The thing is that this component is already included in Next.js. You need to have a custom _app.js file only when there is a need to override a default file.

I decided to override a default App component because of these reasons:

  • Be able to set SEO configuration;
  • Load Tailwind styles;
  • Load custom global styles;

Here is a final code snippet of this component:

/**
 * Default SEO Configuration.
 *
 * This component sets some default SEO properties,
 * that will appear on all pages,
 * without needing to do include anything on them.
 *
 * @link https://github.com/garmeeh/next-seo#default-seo-configuration
 */
import { DefaultSeo } from 'next-seo';

/**
 * Tailwind styles.
 *
 * These styles are based on Tailwind CSS,
 * a utility-first CSS framework.
 */
import 'tailwindcss/tailwind.css'

/**
 * Global styles.
 *
 * These are custom styles for a website,
 * loaded on all pages.
 */
import '../styles/global.css'

/**
 * Component to initialize pages.
 *
 * @link https://nextjs.org/docs/advanced-features/custom-app
 */
function MyApp({ Component, pageProps }) {
	return (
		<>
			<DefaultSeo
				titleTemplate='%s - Taras Dashkevych'
				openGraph={{
					type: 'website',
					locale: 'en_IE',
					url: 'https://www.tarascodes.com/',
					site_name: 'Taras Dashkevych',
				}}
			/>
			<Component {...pageProps} />
		</>
	)
}

export default MyApp

In the code snippet above, my custom App component returns two (2) components:

  1. DefaultSeo: responsibe for setting meta tags, and other SEO related things, for the current page.
  2. Component: responsible for displaying the current page.

Note, the components — listed above — are wrapped within a React Fragment. It is represented as empty tags because I use a shorter syntax.

Also, it is important to note that the SEO component is not a part of a Next.js core. I use a special plugin to add a better search engine optimization for my website.

Home page

This is the main page of a website, and it is shown when somebody visits tarascodes.com. This is also a static page, where content is manually added to the page. Functionality of this page is located in the index.js file.

In my specific case, the Home page serves as an about page, where I shortly introduce myself to visitors. The page is consisted of the page title, several paragraphs and an image.

Here is a final code snippet of this component:

/**
 * Image component.
 *
 * This component is a part of Next.js, which
 * includes a variety of built-in performance optimizations.
 *
 * @link https://nextjs.org/docs/api-reference/next/image
 */
import Image from 'next/image'

/**
 * Profile picture.
 *
 * This is a local image, located in the `public` directory.
 * Note, before using a local image on the page,
 * it has to be imported.
 */
import authorImage from '../public/img/about-me.jpeg';

/**
 * Container component.
 *
 * This component holds all main areas of the website,
 * such as `header`, `main`, `footer`.
 *
 * @link https://www.tarascodes.com/create-components-nextjs-tailwind
 */
import Container from '../components/Container';

/**
 * Header component.
 *
 * This component contains all elements of
 * a top level `header` area.
 *
 * @link https://www.tarascodes.com/create-components-nextjs-tailwind
 */
import Header from '../components/Header';

/**
 * Footer component.
 *
 * This component contains all elements of
 * a top level `footer` area.
 *
 * @link https://www.tarascodes.com/create-components-nextjs-tailwind
 */
import Footer from '../components/Footer';

/**
 * Page title component.
 *
 * This component outputs markup
 * for the main title of a page.
 *
 * @link https://www.tarascodes.com/create-components-nextjs-tailwind
 */
import PageTitle from '../components/PageTitle';

/**
 * Icon component.
 *
 * This component outputs
 * SVG icon based on set `id` and `size`.
 *
 * @link https://www.tarascodes.com/create-components-nextjs-tailwind
 */
import Icon from '../components/Icon';

/**
 * SEO settings for the page.
 */
const seo = {
	title: 'Design+Code',
	description: 'I am a font-end developer focused on inclusive design. This website is my personal digital garden — a collection of the things I have learned and built over the years.'
}

/**
 * Component for the current page.
 */
export default function Home() {
	return (
		<Container>
			<Header seo={ seo } />

			<main className="flow-root">
				<PageTitle>
					About me
				</PageTitle>

				<div className="text-base sm:space-y-6 space-y-4">
					<figure className="float-right leading-none border border-slate-200 sm:ml-6 ml-4 mb-4 rounded bg-white drop-shadow-md sm:p-2 p-1 w-5/12">
						<Image
							src={ authorImage }
							alt="Picture of the site owner of this website"
							placeholder="blur"
							layout="responsive"
						/>
					</figure>

					<p className="sm:text-lg sm:leading-snug text-base">
						Hey! I am Taras, a believer in the power of good design, currently living in Washington state, USA.
					</p>

					<p className="text-gray-800">
						At the moment, I'm working at <a href="https://themesharbor.com/" target="_blank">Themes Harbor</a>, designing and building WordPress themes for professionals.
					</p>

					<p className="text-gray-800">
						Things that excite me the most are CSS, React, Design Systems, UI Animation and easy-to-use interfaces.
					</p>

					<p className="flex items-center gap-2 pt-1">
						<Icon id="volume-up" size={ 24 } />

						<strong>
							Keep creating!
						</strong>
					</p>
				</div>
			</main>

			<Footer />
		</Container>
	)
}

Note, the page above uses custom components, specifically made for a website.

Working on this page has taught me:

  1. how to use Image component from Next.js;
  2. how to use local images in Next.js;
  3. how to set SEO in Next.js pages;

Conclusion

You have now learned how to start building own pages for a website, built with Next.js and Tailwind. Hopefully, this post was useful.