Getting Started with Next.js 14: A Simple App

In this tutorial, we’ll guide you through creating a simple Next.js 14 app using the App Router and Tailwind CSS for styling. We’ll assume that Tailwind CSS has already been installed during the Next.js setup process. Let’s get started!

Prerequisites

Ensure you have the following:

  1. Node.js: Download and install Node.js.
  2. npm or Yarn: A package manager to install dependencies (npm is bundled with Node.js).
  3. Text Editor: Choose a text editor such as VSCode, Sublime Text, or Atom.

1. Creating a New Next.js Project

First, create a new Next.js project with Tailwind CSS:

				
					npx create-next-app@latest nextjs-tailwind-app --experimental-app

				
			

Navigate to the project directory:

				
					cd nextjs-tailwind-app

				
			

2. Understanding the Project Structure

With the App Router, the project structure differs from the traditional pages router:

				
					nextjs-tailwind-app/
├── app/
│   ├── layout.js
│   └── page.js
├── public/
├── styles/
│   └── globals.css
├── tailwind.config.js
├── postcss.config.js
├── .gitignore
├── package.json
└── README.md

				
			
  • app/: Contains the main routing files.
  • public/: For static assets.
  • styles/: Contains global styles.
  • tailwind.config.js: Tailwind CSS configuration.
  • postcss.config.js: PostCSS configuration for processing Tailwind.

3. Setting Up Tailwind CSS

Ensure Tailwind CSS is configured correctly by editing tailwind.config.js:

				
					// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

				
			

Next, include Tailwind’s base, components, and utilities in your global CSS file, styles/globals.css:

				
					/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

				
			

4. Setting Up a Layout Component

The layout component defines the structure of your application. Update the app/layout.js file as follows:

				
					// app/layout.js
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Next.js 14 with Tailwind CSS</title>
      </head>
      <body className="bg-gray-100">
        <header className="bg-blue-600 text-white py-4 text-center">
          <h1>My Next.js 14 App with Tailwind CSS</h1>
        </header>
        <main className="container mx-auto py-8">{children}</main>
        <footer className="bg-gray-800 text-white py-4 text-center">
          <p>&copy; 2024 My Next.js App</p>
        </footer>
      </body>
    </html>
  );
}

				
			

5. Creating Your First Page

Let’s create a simple home page in app/page.js:

				
					// app/page.js
export default function HomePage() {
  return (
    <div className="text-center">
      <h2 className="text-2xl font-bold mb-4">Welcome to Next.js 14 with the App Router and Tailwind CSS!</h2>
      <p className="text-gray-700 mb-4">
        This is a simple example of using the App Router and Tailwind CSS in a Next.js application.
      </p>
      <p className="text-gray-700">
        Edit <code className="bg-gray-200 p-1 rounded">app/page.js</code> to modify this page.
      </p>
    </div>
  );
}

				
			

6. Running the Development Server

To view your application, start the development server:

				
					npm run dev
				
			

Open http://localhost:3000 in your browser to see your app in action.

7. Customizing with Tailwind CSS

Tailwind CSS offers a utility-first approach to styling. For example, to add padding, text colors, and responsive design, you can use utility classes directly in your components. Here’s how you can modify the styling of the HomePage component:

				
					// app/page.js
export default function HomePage() {
  return (
    <div className="text-center p-4">
      <h2 className="text-3xl font-bold mb-6 text-blue-500">Welcome to Next.js 14 with Tailwind CSS!</h2>
      <p className="text-lg text-gray-600 mb-4">
        This tutorial showcases the integration of Tailwind CSS with the App Router in Next.js.
      </p>
      <p className="text-gray-600">
        Modify the <code className="bg-gray-100 p-1 rounded">app/page.js</code> file to see changes.
      </p>
    </div>
  );
}

				
			

8. Deploying Your Next.js App

Deploying your app is straightforward with Vercel. Refer to the deployment documentation to launch your app on the web.

We Are Here to Help

At Kodecraft, we specialize in web development and have deep expertise in Next.js and Tailwind CSS. Whether you’re starting a new project or enhancing an existing one, our experienced team is ready to assist you. Contact us today to discuss how we can help bring your next project to life!

Other Posts

How We Helped InnovativePDR Launch a Strong Online Presence

Check out how we helped InnovativePDR, a mobile dent removal service in Durban, launch a sleek and modern website that showcases their work and makes it easy for customers to connect with them! From logo design to a lightning-fast, fully responsive website, we provided everything Bradley needed to kickstart his business.

The Rise and Fall of MXit

Who remembers MXit? 💬 The ultimate OG chat app that connected us all back in the day! 😎 From chat rooms to “Moola,” MXit was where the magic happened.

Get in touch with us!

Ready to bring your digital vision to life? Drop us a message, and our expert team will get back to you to discuss how we can turn your ideas into reality. Let’s create something amazing together!

Explore how we can help you succeed. Check out our full range of services now!