Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework
JavaScript Mastery・154 minutes read
Facebook introduced React in 2013, leading to job opportunities; in 2023, the Next.js framework was recommended for web development, adopted by companies for SEO benefits and efficiency. Next.js simplifies development, routing, and server-side components, streamlining processes and optimizing website performance.
Insights
- Facebook's React technology introduced in 2013 revolutionized web development and created significant job opportunities.
- Companies like Netflix, TikTok, and Nike have adopted Next.js for their websites, indicating its popularity and reliability.
- Next.js simplifies web development through features like server-side rendering, file-based routing, and automatic code splitting.
- Next.js allows for the creation of full-stack applications with API routes for serverless functions, optimizing website performance.
- Detailed guidance on building a modern Next.js application, including authentication setup, MongoDB connection, and deployment to platforms like Versel, is provided in the text.
Get key ideas from YouTube videos. It’s free
Recent questions
What are some companies using Next.js?
Netflix, TikTok, Twitch, Hulu, Nike
Related videos
Summary
00:00
Revolutionizing web development with Next.js technology
- In 2013, Facebook introduced React, a technology that revolutionized web development and created job opportunities.
- In 2023, the official React documentation suggests using React-powered frameworks like Next.js instead of plain React.
- A special resource, the Ultimate Next.js 13 eBook, covers everything needed to become a professional Next.js developer.
- Companies like Netflix, TikTok, Twitch, Hulu, and Nike have adopted Next.js for their websites.
- Node.js migrated its website to Next.js for the long term, indicating a shift towards Next.js among companies.
- Next.js offers server-side rendering, which aids in SEO by enabling easy crawling and indexing by search engines.
- Next.js uses a file-based routing system, simplifying the creation of page routes without external packages.
- Next.js allows for the creation of full-stack applications with API routes for serverless functions.
- Automatic code splitting in Next.js optimizes website load times by loading code chunks as needed.
- Next.js streamlines development processes by automating tasks, allowing developers to focus on writing React code.
20:11
"Transform server-side to client-side with React"
- To transform a server-side component into a client-side one, use "use client" on top when utilizing state or hooks like "use state" in React.
- State management in React primarily occurs on the client side, where component state is managed and updated within the browser.
- Use "use client" with React hooks like "use state" or "use effect" to prevent errors.
- Server components are recommended by default until a need for client components arises, as per Next.js documentation.
- Use server-side components for fetching data like articles, blog posts, or website data, and for accessing backend resources directly.
- Use client-side components for interactivity, event listeners, state management, lifecycle effects, custom hooks, or React class components.
- Next.js simplifies routing by creating folders corresponding to desired routes within the app directory.
- Nested routing in Next.js involves nesting folders to create routes, simplifying the process compared to React without Next.js.
- Dynamic routing in Next.js allows for flexible page creation based on variables or data, using square brackets for dynamic IDs.
- Next.js allows for the creation of layout and loading files within subfolders to share UI components and handle errors gracefully.
39:13
Creating Next.js API with Primetopia features
- To create an endpoint in Nexjs with similar functionality to Express, export an async function named "get" to retrieve users and return them.
- Nexjs simplifies API creation by handling details like Express configuration, allowing focus on specific endpoint needs and business logic.
- To access the specific API in the browser, navigate to "localhost:3000/API/users" within the app's API users route.
- Nexjs introduces a new metadata API offering static and dynamic metadata management for SEO improvement.
- For static metadata modification, export a metadata object with a title from the file exporting the specific page or route.
- Dynamic metadata involves an async function to generate metadata based on dynamic parameters like a product ID.
- The project "Primetopia" is an open-source AI prompting tool for creating and sharing creative prompts using Chat GPT.
- Features of Primetopia include Google authentication, browsing prompts by tags, usernames, and content, and CRUD functionality.
- To start building a modern Next.js application, create a new folder named "primetopia" and install dependencies like bcrypt, mongodb, Mongoose, and next-auth.
- Develop the project structure with folders for components, models, public, styles, utils, and an .env file, and add assets and styles for the application.
58:05
"Next.js: Importing Components and Navigation Setup"
- To import the feed component, use "import feed from add components/feed" in Next.js.
- Call the self-closing feed component to render the word "feed."
- Move on to the layout JSX to include the navigation bar, ensuring its reuse across all pages.
- Import "nav" and "provider" from add components/nav and add components/provider respectively.
- Import "link" and "image" from next/link and next/image to enable navigation and image optimization.
- Import hooks "useState" and "useEffect" from React for functional components.
- Import "signIn," "signOut," "useSession," and "getProviders" from next-auth/react for authentication.
- Create the structure of the navigation bar by modifying a div into a semantic nav tag with specific class names and elements.
- Develop the mobile navigation by setting up conditional rendering based on user login status and adding buttons for actions like creating a post and signing out.
- Implement a dropdown menu for mobile navigation by toggling a state and rendering links and buttons accordingly.
01:17:02
Next Auth Google Authentication Setup
- To implement authentication, the provider component needs to be wrapped around the body in the app.
- Next auth requires both front-end files and next GS API backend endpoints for authentication.
- Create a new folder named API within the app and then a folder named auth within it.
- Within the auth folder, create a folder named [next auth] and a route.js file.
- Import next auth and Google provider from next-auth/providers/Google to handle authentication.
- Create a Handler function using next auth, specifying Google provider with client ID and client secret.
- Export Handler as get and post for next authentication setup.
- Obtain Google credentials from console.cloud.google.com and add them to the .env file.
- Connect to the MongoDB database using Mongoose and create a user model in the models directory.
- Implement sign-in function to check for existing users, create new users, and update user session data.
01:37:15
Next Auth Documentation Installation and Configuration
- Visit next Dash auth.js.org for the next auth documentation
- Find the getting started section for a detailed procedure on installing next auth, adding API routes, and other functions
- Learn how to create next.js callbacks, like the session callback, and configure specific callback URLs
- Create three new environment variables in the .env file: next_auth_URL, next_auth_URL_internal, and next_auth_secret
- Generate a random string for next_auth_secret using OpenSSL in the terminal
- Test the authentication by running npm run Dev in the terminal
- Update the next.config.js file to enable top-level await
- Correct a typo in the user.js file by changing new schema to new Schema
- Run the application using npm run Dev to ensure successful compilation and running on localhost 3000
- Implement Google authentication by adding the redirect URI to the Google Cloud console and setting up providers and callbacks in the code
- Verify successful login by checking MongoDB connection and database creation, enabling the creation of prompts and user profiles
01:56:25
Enhance Appearance and Create New Prompts
- Use font Dash semi bold text Dash base and text Dash gray-700 to enhance appearance
- Add a text area labeled "text area" with value as post dot prompt and on change callback function to update post
- Include a placeholder "write your prompt here" and a class name "form underscore text area" for styling
- Duplicate the label for prompt field or tag, using an input instead of text area, with value as post dot tag
- Create a cancel button with a link saying "cancel" and a button for submission with type "submit" and disabled property
- Style the button with padding, background color, and text color for a call to action appearance
- Implement create prompt function by preventing default behavior, setting is submitting to true, and making an API call to post a new prompt
- Create a new prompt route in the API folder with a post request to save the prompt data to the database
- Define a prompt schema in the models folder to structure the prompt data in the database
- Import the prompt model in the new prompt route to create and save a new prompt, returning a response with the new prompt data if successful
02:15:02
Creating Interactive Feed with Prompt Cards
- The prompt card component is sourced from dot slash prompt card.
- The JSX part of the feed is initiated by creating a section with a class name "feed" containing a form for feed search.
- The form includes a self-closing input tag with type "text" and a placeholder for search, linked to a state "search text" and an "on change" function "handle search change."
- To resolve the error of undeclared state, a new state "search text" is created using the useState hook.
- A function "handle search change" is declared to manage search input changes.
- The prompts are rendered using a component called "prompt card list," accepting data and a handle tag click function.
- Data for the prompt card list is fetched from a GET request to the nextgs API endpoint "/API/prompt" using the useEffect hook.
- The API endpoint "/API/prompt" is created to fetch all prompts and return them as JSON data.
- The fetched posts are passed to the prompt card list component for rendering.
- The prompt card component is structured to display the prompt, creator's image, username, email, copy button, prompt content, and tags, with functionality to copy prompts to the clipboard.
02:34:36
"Async delete, edit, fetch posts for profile"
- Need to add const handle delete as an asynchronous function for future use
- Pass handle edit and handle delete to the profile component
- Modify API endpoint to fetch only posts belonging to a specific profile
- Rename component to my profile to avoid clashes
- Fix misspelled handle delete
- Reuse fetch posts function from feed page in my profile
- Use dynamic template string to fetch posts from a specific user
- Create posts state using useState and update data accordingly
- Create API endpoint for fetching posts from a specific creator
- Implement handle edit and handle delete functionalities in prompt card for profile page
02:53:09
"JSM Masterclass: Software Engineering Boot Camp"
- JSM masterclass is a six-month boot camp teaching software engineering with a job guarantee.
- If job not secured within six months post-graduation, full refund is offered.
- Real expert mentors, including the speaker, assist in building applications for YouTube.
- The delete route involves a try and catch block, connecting to the database, finding and removing a prompt by ID.
- Special function `await prom.findByIDAndRemove` is used to delete the prompt.
- Three new endpoints are created for front-end application use.
- Full stack development environment called next.js allows calling these endpoints from the front-end.
- Editing functionality involves navigating users to a page with a form for editing prompts.
- Reusability in React is highlighted by transitioning from create to edit functionality.
- Handle delete function confirms user intent, deletes prompt, and updates the posts list accordingly.
03:11:39
"Deploying Next.js Profile Page with Versel"
- The text discusses creating a new profile page that fetches posts from a different user and reuses an existing profile component.
- It emphasizes the availability of full finished code for reference and guidance.
- Instructions are provided on deploying the project to the web, either immediately or after implementing additional features.
- Details on checking file and folder structure, ignoring the .env file, and creating a new GitHub repository are outlined.
- The process of initializing Git, committing code, creating branches, adding remotes, and pushing code to GitHub is explained.
- The text introduces Versel as a platform for deploying Next.js applications, highlighting its simplicity and benefits.
- Steps for creating a new project on Versel, importing a Git repository, setting environment variables, and deploying the project are detailed.
- Troubleshooting steps for fixing build errors, updating environment variables, and resolving callback URL mismatches are provided, ensuring successful deployment.
