How to create components in Next.js 14

Next.js is a popular React framework that makes it easy to build server-rendered React applications. In this article, we will take a look at how to create components in Next.js 14.

Step 1: Create a new component

To create a new component in Next.js, you simply need to create a new file with a .js extension in the components directory of your Next.js project. For example, you can create a new component named “Header.js” in the components directory.

        
            // components/Header.js

            const Header = () => {
                return (
                    

                        
Welcome to Next.js!
                    
                );
            }

            export default Header;
        
    

Step 2: Use the component in your pages

Once you have created a new component, you can use it in your pages by importing it and including it in your JSX code. For example, you can include the Header component in your Index page as follows:

        
            // pages/Index.js

            import Header from '../components/Header';

            const Index = () => {
                return (
                    

                        

                        
Welcome to my Next.js app!
                    
                );
            }

            export default Index;
        
    

Step 3: Start your Next.js app

Finally, you can start your Next.js app by running the following command in your terminal:

        
            npm run dev
        
    

Once your Next.js app has started, you should be able to see the Header component being rendered on the Index page of your app.

And that’s it! You have successfully created and used a new component in Next.js 14. Happy coding!