In this tutorial, we will walk through how to build and deploy a full stack app using the Next.js 14 framework. Next.js is a popular React framework that allows you to build server-side rendered and static websites with ease. With the release of Next.js 14, there are many new features and improvements that make it even easier to build and deploy full stack apps.
Here’s what we will cover in this tutorial:
- Setting up a new Next.js 14 project
- Creating a frontend with React components
- Setting up a backend with an API
- Connecting the frontend and backend
- Deploying the app to the cloud
Let’s get started!
Setting up a new Next.js 14 project
To begin, make sure you have Node.js installed on your machine. You can download it from the official Node.js website.
Next, open your terminal and run the following command to install the Next.js CLI globally on your machine:
npm install -g create-next-app
Next, create a new Next.js project by running the following commands:
npx create-next-app@14 my-fullstack-app
cd my-fullstack-app
This will create a new Next.js project with all the necessary files and dependencies. Now, you can run the development server by running:
npm run dev
You should see your app running on http://localhost:3000.
Creating a frontend with React components
Next, let’s create a simple frontend for our app using React components. Open the pages/index.js
file and replace the content with the following code:
import React from 'react';
const Home = () => {
return (
<div>
<h1>Welcome to my full stack app!</h1>
</div>
);
};
export default Home;
This code will create a simple homepage for your app. You can add more components and pages as needed to build out your frontend.
Setting up a backend with an API
Next, let’s set up a backend for our app by creating an API. Create a new api
folder in the root of your project and create a new file called hello.js
. In this file, add the following code:
export default (req, res) => {
res.statusCode = 200;
res.json({ message: 'Hello from the API!' });
};
This code will create a simple API endpoint that returns a JSON response with a message. You can add more endpoints and logic as needed to build out your backend.
Connecting the frontend and backend
To connect the frontend and backend, we can use the fetch
API in our React components. Update the pages/index.js
file with the following code:
import React, { useEffect, useState } from 'react';
const Home = () => {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('/api/hello')
.then(res => res.json())
.then(data => {
setMessage(data.message);
});
}, []);
return (
<div>
<h1>Welcome to my full stack app!</h1>
<p>{message}</p>
</div>
);
};
export default Home;
This code will make a request to the API endpoint we created earlier and display the response message on the homepage of our app.
Deploying the app to the cloud
To deploy our app to the cloud, we can use platforms like Vercel, which provide seamless deployment for Next.js apps. First, create a Vercel account and install the Vercel CLI by running the following command:
npm install -g vercel
Next, run the following command to deploy your app to Vercel:
vercel
Follow the prompts to deploy your app to Vercel. Once deployed, you can access your app using the provided URL.
Congratulations! You have successfully built and deployed a full stack app using the Next.js 14 framework. Feel free to customize and expand on this app to learn more about Next.js and full stack development.
If you want to truly master the most modern Next.js, check out: https://www.jsmastery.pro/next14 🔥
after 1h20 of tutorial, still having this error in the console: "Failed to load resource: the server responded with a status of 404 (Not Found)" along with this displaying in loop in the terminal : GET /api/auth/providers 405 in 3ms
POST /api/auth/_log 405 in 2ms
GET /api/auth/providers 405 in 2ms
POST /api/auth/_log 405 in 3ms
GET /api/auth/providers 405 in 3ms
POST /api/auth/_log 405 in 5ms
if login fails at 1:45:00, remove the match line from the user.js file
буду ждать след видео,все четко и понятно🥭
For NextAuth URL and the redirect URL in google cloud console it should be http://localhost:3000/api/auth/callback/google instead. Still trying to solve access denied error after that.
Hi. you are so wonderful I don't know what I would do without you. Thanks so much. God bless you for what you are doing for struggling aspiring developers out there like me. I would love to know what a developer like me in Cameroon can do to get hired. Also, how do you create these beautiful animated presentation videos.
at 1:21:36 u can skip adding an authorized domain he did not tell that
This is an underrated channel. How Adrian does not have millions of subscribers I don't know
Moment of realization 😂 3:21:35
Hello dear brother,
I have finished your tutorial and I would like to THANK YOU!! I’ve seen many tutorials online, but most of them are incomplete or lack resources to follow. However, your tutorial is comprehensive and perfect! Thanks again, and thank you for making it free! If I become rich, I won’t forget you xD !! i ask god to reward you !
For those people that are stucked with the delete prompt function at 3:05:11 , check your version of mongoose. In mongoose version 8 onwards, there is no more findByIdAndRemove. Instead change it to findByIdAndDelete and it should works just fine.
invalid next.config.mjs options detected: Unrecognized key(s) in object: 'appDir' at "experimental", is related to the appDir option in the experimental configuration. In recent versions of Next.js, the appDir option is no longer experimental and has been fully integrated. So, using it under experimental will trigger a warning.
Why do you use nextjs if you render almost everything on the client?
Access blocked : Authoristation error is showing at 1:45 u have just to remove match on user.js or change regex also in the file database
useNewUrlParser is a deprecated option: useNewUrlParser has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version
useUnifiedTopology has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version so u can remove it
does this 3 hour course give complete next js learning ?
When i wrote down useEffect hook in Nav it created infinite loop of setProviders function call is this have to be like this?
It was a great tutorial for Next13 but not for Next14 (which you just changed the name to because wanna earn more money, obviously). A lot of things are not recommended – creating serverless API routes for fetching and mutating data, all should be done withing a server action (/ function as it's gonna be called in Next15). Definitely not recommended to be watched in 2024, sorry.
This is awesome!
Great
You are a great teacher .The way you explain things is phenomenal.Thank you so much for this great project .I have completed this project