Next.js is referred to as the React framework for production, which comes with more features than simple React as a library. It gives us rules and guidelines on how we should structure our projects and it improves React developers' life, with built-in features like file-system based routing or “head” metadata for SEO.

In this article, we will build a simple food app that displays menu. It will be styled with Tailwind Css in the first part, and in the coming parts, we will connect the app to a MongoDB database and deploy it on Vercel.

Prerequisites

For the tutorial to go well, you must have basic knowledge of Node js and React and have either a GitHub / Bitbucket / Gitlab account. You need also to have at least Node js 14.18.1 LTS and Git installed on your computers.

1. Let's start a new project

All the prerequisites are met, open your terminal and create a new project;

• Run the three commands below, to create a new project directory and set up a new "package.json" file :

$ mkdir next-food-app
$ cd next-food-app
$ npm init -y

• Next step, in the project directory, install react and react-dom as dependencies, Next.js requires them as peer dependencies:

$ npm install react react-dom

• Free from npm warnings, you can now install Next.js, run:

$ npm install next

• Open the "package.json" file, in the scripts section, replace the actual code by the one below :

 "scripts": {
   "dev": "next",
   "build": "next build",
   "start": "next start"
 },

• Back to the project directory, create a folder named “/pages” and inside “/pages” create a file named “index.js” :

Note: Next.js comes with the file-system based routing feature, which makes all files added to the “/pages” directory available as routes. All files except “index.js”, which the Router automatically routes to the root of the directory.

/pages/index.js => /
/pages/meals/index.js => /meals
/pages/meals.js => /meals

• Great, in the "/pages/index.js" create the application HomePage with the following code :

const HomePage = () => {
  return <h1>Welcome to our Food Next.js App &#x1F60a;</h1>;
};
export default HomePage;

• Now, go to your the terminal, in the project directory, run the command below and on your browser open http://localhost:3000 :

$ npm run dev

You will get the same page on your browser if nothing was omitted.

2. Let's add Tailwind css

• First step here is to install tailwindcss in the project, you will do so by running the following command in the project directory:

$ npm install tailwindcss postcss autoprefixer

• Next, generate “tailwind.config.js” and “postcss.config.js” files with this command in the project directory:

$ npx tailwindcss init -p

• Open the “tailwind.config.js” file and replace all code in there by these:

module.exports = {
 purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
};

• In the project directory, create a folder named "/public", inside "/public", create another folder named "/style" where you will add a file named "global.css" and put the code below in it:

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

• After, import your style in your Javascript: To do so, create inside the “/pages” directory, a file named “_app.js”.

Note: In Next.js the file "_app.js" in the "/pages" directory overrides the default “App” component that allows us to add global css to the whole application.

import "../public/style/global.css";

const MyApp = ({ Component, pageProps }) => {
 return <Component {...pageProps} />;
};
export default MyApp;

Put the code above in your "_app.js" file, run $ npm run dev and open your browser on http://localhost:3000 .
If the procedure was followed correctly, you will notice a difference with the text font between the project before and after tailwind css. Just like in the images below;

Before

After

3. Finally, let’s add React components

Note: Next.js is built on top on react, therefore react components are part of it.

• In the project directory, create a folder named "/components", and add two js files respectively named “MealList.js” and “MealItem.js”.
• Drop the code below in “MealItem.js”:

const MealItem = () => {
  return (
    <div className="w-1/4 p-8 shadow-lg rounded-lg bg-yellow-50">
      <img src="/img/meal1.PNG" className="w-auto h-auto" alt="Chicken Salad" />
      <div className="text-center py-2">
        <h3 className="text-xl font-normal">
          Chicken Salad
          <span className="px-3 font-light text-yellow-500">(4 dishes)</span>
        </h3>
        <p className="text-gray-500 text-base">Herico de Porto</p>
        <button className="bg-yellow-500 px-4 py-2 rounded-lg text-gray-50 font-medium mt-2">
          Details
        </button>
      </div>
    </div>
  );
};
export default MealItem;

• And drop this in “MealList.js”:

import MealItem from "./MealItem";
const MealList = () => {
  return (
    <div className="flex flex-wrap">
      <MealItem />
    </div>
  );
};
export default MealList;

• Import your react components in the Homepage “/pages/index.js” : Delete all code in there and put the code below:

import MealList from "../components/MealList";
const HomePage = () => {
  return <MealList />;
};
export default HomePage;

• Download the image found on this link -> https://github.com/musole-masu/nextjs-food-app/blob/main/public/img/meal1.PNG

• Create in the "/public" directory a folder named "/img" and put the downloaded image in there.

• Now, wrap your pages with the style added in the "_app.js" just like it's done below:
  

import "../public/style/global.css";

const MyApp = ({ Component, pageProps }) => {
  return (
    <div className="max-w-7xl mx-auto py-40">
      <Component {...pageProps} />
    </div>
  );
};
export default MyApp;

• In your terminal, in the project directory, run $ npm run dev, then go to http://localhost:300

If you have this exact page on the browser, it means that you have completed each step of this tutorial correctly. Congrats :)

4. Conclusion

The Part 1 of our tutorial ends here. To summarize, it was focused on the project creation, with the installation of dependencies and also focused on styling.
Part 2 will be published very soon, so stay tuned and follow me on Twitter for updates.

Find the completed project here.

À bientôt