Nextjs学习教程

萧寂173

已于 2024-06-08 19:04:01 修改

阅读量2.3k

点赞数 8

分类专栏： react 文章标签：前端

于 2024-06-04 23:00:07 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/139392596

版权

一.手动创建项目

建议看这个中文网站文档,这个里面的案例配置都是手动的,也可以往下看我这个博客一步步操作
1.在目录下执行下面命令,初始化package.json文件

npm init -y

2.安装react相关包以及next包

yarn add next react react-dom
// 或者
npm install --save next react react-dom

3.在package.json文件的script节点,新增以下内容

  "scripts": {
   
    ...,
    "dev": "next",  // 开发时运行
    "build": "next build", // 打包时运行
    "start": "next start"  // 打完包启动服务的命令
  }

注意:Next.js 只支持React 16及以上

4.根目录下新建pages目录(这里面就是所有页面代码了,会根据这个目录的内容自动生成路由)

5.在pages里面新建index.js,放入以下内容进行测试

export default function(){
   
    return <div>我是pages/index下面的内容</div>
}

6.启动项目测试

npm run dev
// 或者
yarn run dev

7.访问控制台的local地址,显示出如下页面

在这里插入图片描述
8.打包

npm run build
// 或者
yarn run build

打完包会在项目下新建生成一个.next文件,在根目录下执行如下命令会和开发时看到的效果一致

npm run start
// 或者
yarn run start

二.快速创建项目

官网文档

执行下面创建项目的命令

npx create-next-app next-create

下面会出现一堆询问的配置信息,这里直接走默认就好了

定义路由

这里的页面都是统一放到app文件夹下面每个文件的page.js文件

例如直接访问localhost:3000则访问的是app/page.js文件

例如直接访问localhost:3000/user则访问的是app/user/page.js文件

export default function(){
   
    // className={"text-red-500"} 使用原子化css标签
    return <div className={
   "text-red-500"}>我是user/page文件</div>
}

如果访问的页面有很多网格效果,则去app/globals.css里面把样式都删除,只留前三行即可

页面与布局

将app/Layout.js进行改造

import {
    Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({
    subsets: ["latin"] });

export const metadata = {
   
  title: "Create Next App",  // 网站标题
  description: "Generated by create next app", // 描述信息
};

export default function RootLayout({
     children }) {
   
  return (
    <html lang="en">
      <body className={
   inter.className}>
        app下面的layout
        {
   children}</body>
    </html>
  );
}

新建app/user/Layout.js存入以下内容

export default function userLayout({
     children }) {
   
  return (
    <section>
        user下面的layout
        {
   children}
    </section>
  );
}

访问localhost:3000

在这里插入图片描述
访问localhost:3000/user

在这里插入图片描述
通过对比可以发现,app下面的就是公共的根样式,下面每个Layout.js都会继承到,然后每个文件夹下都可以定义当前路由页面的样式

链接和导航

修改下app/page.js内容如下

'use client';
import Link from "next/link";
import {
    useRouter } from "next/navigation";


export default function Home() {
   
  const router = useRouter()
  return (
    <>
    <h1 className="text-4xl text-orange-600">Hello Name</h1>
    <br></br>
    <Link href={
   "/user"}>跳转到user路由</Link>
    <br></br>
    <button onClick={
   ()=>{
   router.push('/user')}}>点击跳转/user</button>
    </>
  );
}

滚动到新路由的指定位置处,相当于锚点链接

<Link href="/dashboard#settings">Settings</Link>
 
// Output
<a href="/dashboard#settings">Settings</a>

路由组

项目下新建三个路径文件

app/(marketing)/about/page.js
app/(marketing)/bolg/page.js
app/(marketing)/(shop)/acconut/page.js

在每个page.js里面随便写点内容,访问以下路径

localhost:3000/about
localhost:3000/bolg
localhost:3000/account

可以发现都能被访问到,总结规律就是文件夹名字带括号的相当于可以忽略了

路由组不参与url的设定的

个人感觉唯一作用是用于设置共同的Layout.js

创建如下两个Layout.js文件

app/(marketing)/Layout.js
app/(marketing)/(shop)/Layout.js

在这两个里面添加如下代码

export default function userLayout({
     children }) {
   
  return (
    <section>
        marketing下面的layout
        {
   children}
    </section>
  );
}

export default function userLayout({
     children }) {
   
  return (
    <section>
        marketing下面shop的layout
        {
   children}
    </section>
  );
}

运行后会发现,marking的Layout,js被它里面所有文件所共用,shop里面的Layout.js被shop里面的文件所共用,因为这个案例shop在marking里面的,因此shop里面的文件也共用marking里面的样式,这就是路由组,按照上面传统的方式建路由,需要每个文件单独设置自己的Layout.js,使用路由组可以达到复用性

动态路由

在app/user新建[username]文件夹,里面的page.js文件内容如下

export default function({
    params}){
   
    console.log('params',params);
    return <>
    <div>我是user/[username]动态路由{
   params.username}</div>
    </>
}

将app/page.js内容修改如下

'use client';
import Link from "next/link";
import {
    useRouter } from "next/navigation";


export default function Home() {
   
  const router = useRouter()
  return (
    <>
    <h1 className="text-4xl text-orange-600">Hello Name</h1>
    <br></br>
    <Link href={
   "/user/王二"}>跳转到user路由</Link>
    <br></br>
    <button onClick={
   ()=>{
   router.push('/user/王五'