layout nextjs
Create a new Next.js app:
bash npx create-next-app my-nextjs-app
Navigate to the project directory:
bash cd my-nextjs-app
Create a new layout component, for example,
components/Layout.js
: ```jsx // components/Layout.js import React from 'react';
const Layout = ({ children }) => { return (
export default Layout; ```
- Use the layout component in your pages. For example, in
pages/index.js
: ```jsx // pages/index.js import React from 'react'; import Layout from '../components/Layout';
const HomePage = () => {
return (
Welcome to my Next.js app with layout!Home Page
export default HomePage; ```
Update other pages accordingly by importing and using the
Layout
component.Customize the
Layout
component as needed for your application structure.Run the Next.js app:
bash npm run dev
Open your browser and visit
http://localhost:3000
to see the app with the layout in action.
That's it! You have successfully implemented a basic layout in a Next.js app.